Using bootstrap-datetimepicker, specifically time, update values of multiple inputs on change?

Question

I am using: https://eonasdan.github.io/bootstrap-datetimepicker/#inline

I am trying to "sync" the value of a bootstrap-datetimepicker plugin with a hidden input.

<script>
// Initialise the time pickers, on load update the start_time_x_sync values
function initialiseTimePicker(pickerId) {
  // Initialise time pickers
  $(pickerId).datetimepicker({
    format:'hh:mm A',
    inline: true
  }).on('dp.change', function(e) {
    // Grab the time value
    var date = $(pickerId).data('date');
    // Populate the hidden inputs for php to process them
    var syncId = pickerId+'_sync';
    $(syncId).val(date);
  });
};
// Run it
$(function() {
  initialiseTimePicker("start_time_1");
  initialiseTimePicker("start_time_2");
};
</script>

<label for="start_time_1">START TIME 1</label><br/>
<div id="start_time_1"></div>
<input type="hidden" id="start_time_1_sync" name="00:00 AM" />

<label for="start_time_2">START TIME 2</label><br/>
<div id="start_time_2"></div>
<input type="hidden" id="start_time_2_sync" name="00:00 AM" />

This works out quite well because I have 2 inline time pickers however there is something that I am batting to understand here.

If I use only 1 input then each time I alter the #start_time_1 value, hour/minute/am/pm then it will update #start_time_1_sync with the time value, e.g. 00:00 AM.

When I use 2 inputs and I try to alter the #start_time_1 value, in #start_time_1_sync it shows the value for #start_time_2 and seems to get stuck because it will never change after that. However, if at that point I change the value of #start_time_2 then #start_time_2_sync gets the updated value of #start_time_2 each time a change it made as is expected.

So, in this example, it works for 1 if there is only one, but if there is 2 it only works for the second one. If there is three then it only works for the third.

How can I get them all to work without losing my hair? Thanks in advance!

Edit:

Here is the docs for dp.change: https://eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange

Answer 1

As all are using the same function to initialise, the parameter pickerId passed in last will be the parameter all the change events will receive.

try using this within the change:-

function initialiseTimePicker(pickerId) {
  // Initialise time pickers
  $(pickerId).datetimepicker({
    format:'hh:mm A',
    inline: true
  }).on('dp.change', function(e) {
    // Grab the time value
    var date = $(this).data('date');
    // Populate the hidden inputs for php to process them
    var syncId = '#' + this.id +'_sync';
    $(syncId).val(date);
  });
};

and I assume you should be using # in the parameters?

initialiseTimePicker("#start_time_1");
initialiseTimePicker("#start_time_2");

Also, its worth looking into closures.