Show Realtime Clock on Input Field using Jquery

Please help, I want to show date and Live Clock using JQuery on input field.

My expectation dd-mm-yyyy, H:i:s but what I get is d-m-yyyy H:i:s

setInterval(function() {
    var date = new Date();
    $('#dateTime').val(
      date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() + ", " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
    );
  }, 500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="tanggal">Date, Time</label>
  <input type="text" class="form-control" name="dateTime" id="dateTime" readonly>
</div>

Date, Time input Field

My Expectation : 08-01-2024
Input field : 8-0-2024

Something wrong with my code ?

Date and Realtime Clock