How to sum bootstrap time picker on each row

Question

I am using Joris de Wit time picker plugin.
I have multiple dynamic rows that require three time picker each. I have successfully created the multiple instance of bootstrap time picker in a single page.

$('.timepicker-input').timepicker({
    maxHours: 24,
    showSeconds: true,
    showMeridian: false,
    defaultTime: '00:00:00'
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jdewit.github.io/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<form action="" method="POST">
  <!-- Each div will be generate from PHP loop, 
  and the i variable from the loop will append with id. 
  Thus each time id will be unique (Right now I am thinking that way, it can be done more efficiently) -->
  <div class="input-group bootstrap-timepicker timepicker">
    <span>1.</span>
    <input type="text" class="form-control timepicker-input" id="desingTime1" >
    <input type="text" class="form-control timepicker-input" id="devTime1" >
    <input type="text" class="form-control timepicker-input" id="totalTime1" readonly disabled >
  </div>

  <div class="input-group bootstrap-timepicker timepicker">
    <span>2.</span>
    <input type="text" class="form-control timepicker-input" id="desingTime2" >
    <input type="text" class="form-control timepicker-input" id="devTime2" >
    <input type="text" class="form-control timepicker-input" id="totalTime2" readonly disabled >
  </div>
  
  <div class="input-group bootstrap-timepicker timepicker">
    <span>3.</span>
    <input type="text" class="form-control timepicker-input" id="desingTime3" >
    <input type="text" class="form-control timepicker-input" id="devTime3" >
    <input type="text" class="form-control timepicker-input" id="totalTime3" readonly disabled >
  </div>

  <button type="button" class="btn btn-primary">Submit</button>
</form>

Now my question is, How to load the summation of the first two time picker into the Total time field on each row.
I have searching this solution over days, and couldn't come up with any solution to perform operation on each row.
As I am just beginner to Javascript. Any suggestion/guidance will help me a lot.

Answer 1

Ignore my comment above, I hadn't realized the plugin allowed for values over 24 hours.

Please see the working example below. My example below will calculate all timespicker inputs in a row except for the last one so you can if you ever need to add more inputs it will automatically calculate those without having to edit the javascript.

const timepickerOptions = {
    maxHours: 24,
    showSeconds: true,
    showMeridian: false,
    defaultTime: '00:00:00'
};

// Loop through each dynamic input group
$('.input-group.bootstrap-timepicker').each(function() {
    const $row = $(this);
    const $pickers = $row.find('.timepicker-input');

    // This is the total number of editable inputs excluding the last input used for the total.
    const numberOfInputs = $pickers.length - 1;
    
    // Get all the inputs except for the last one as that will be used as the total.
    const $inputs = $pickers.slice(0, numberOfInputs);

    // Get the last input for adding the total.
    const $result = $pickers.last();

    // Initiate the timepicker plugin for the inputs excluding the total.
    $inputs.timepicker(timepickerOptions);

    // Initiate the plugin for the total input but increase the maximum hours by x number of inputs.
    $result.timepicker({...timepickerOptions, ...{
        maxHours: timepickerOptions.maxHours * numberOfInputs
    }});

    // Listen for the input update event.
    $inputs.on('changeTime.timepicker', event => {

        let totalHours = 0;
        let totalMinutes = 0;
        let totalSeconds = 0;

        // Calculate the totals of each input.
        $inputs.each(function() {
            const $input = $(this);
            const data = $input.data('timepicker');

            totalHours += data?.hour || 0;
            totalMinutes += data?.minute || 0;
            totalSeconds += data?.second || 0;
        });

        // If total seconds is greater than the plugin can handle, add remainder to minutes.
        if (totalSeconds >= 60) {
            totalMinutes += Math.floor(totalSeconds / 60);
            totalSeconds = totalSeconds % 60;
        }

        // If total minutes is greater than the plugin can handle, add remainder to hours.
        if (totalMinutes >= 60) {
            totalHours += Math.floor(totalMinutes / 60);
            totalMinutes = totalMinutes % 60;
        }

        // Format the values for the timepicker plugin.
        const result = `${totalHours}:${String(totalMinutes).padStart(2, '0')}:${String(totalSeconds).padStart(2, '0')}`;

        // Set the resulting value.
        $result.timepicker('setTime', result);
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jdewit.github.io/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<form action="" method="POST">
  <!-- Each div will be generate from PHP loop, 
  and the i variable from the loop will append with id. 
  Thus each time id will be unique (Right now I am thinking that way, it can be done more efficiently) -->
  <div class="input-group bootstrap-timepicker timepicker">
    <span>1.</span>
    <input type="text" class="form-control timepicker-input" id="desingTime1" >
    <input type="text" class="form-control timepicker-input" id="devTime1" >
    <input type="text" class="form-control timepicker-input" id="totalTime1" readonly disabled >
  </div>

  <div class="input-group bootstrap-timepicker timepicker">
    <span>2.</span>
    <input type="text" class="form-control timepicker-input" id="desingTime2" >
    <input type="text" class="form-control timepicker-input" id="devTime2" >
    <input type="text" class="form-control timepicker-input" id="totalTime2" readonly disabled >
  </div>
  
  <div class="input-group bootstrap-timepicker timepicker">
    <span>3.</span>
    <input type="text" class="form-control timepicker-input" id="desingTime3" >
    <input type="text" class="form-control timepicker-input" id="devTime3" >
    <input type="text" class="form-control timepicker-input" id="totalTime3" readonly disabled >
  </div>

  <button type="button" class="btn btn-primary">Submit</button>
</form>