CheckIn CheckOut Button with Time display using JavaScript

<style type="text/css">
    body { font-family: Arial; font-size: 10pt; }
    table { border: 1px solid #ccc; }
    table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
    table th, table td { padding: 5px; border-color: #ccc; }
</style>
<table>
    <tr>
        <td>
            <input id="btnCheckIn" type="button" value="Check In" onclick="GetCurrentDateTime('lblCheckIn')" /></td>
        <td><span id="lblCheckIn"></span></td>
    </tr>
    <tr>
        <td>
            <input id="btnCheckOut" type="button" value="Check Out" onclick="GetCurrentDateTime('lblCheckOut')" /></td>
        <td><span id="lblCheckOut"></span></td>
    </tr>
</table>
<script type="text/javascript">
    function GetCurrentDateTime(elementId) {
        var today = new Date();
        var day = String(today.getDate()).padStart(2, '0');
        var month = String((today.getMonth() + 1)).padStart(2, '0');
        var year = today.getFullYear();

        var hour = String(today.getHours()).padStart(2, '0');
        var minute = String(today.getMinutes()).padStart(2, '0');
        var second = String(today.getSeconds()).padStart(2, '0');

        var date = day + '/' + month + '/' + year;
        var time = hour + ":" + minute + ":" + second;
        document.getElementById(elementId).innerHTML = date + " " + time;
    }
</script>