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; }); // 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>