Issue with iterating HTML Table (for working hours) with JQuery

Question

I have a table in HTML where the user puts in their start time and their end time which calculates the hours in total. If the hours in total ranges between 0-4, the "standby hours" text field will display the value of 0.5, if the "hours in total" ranges between 4-8, the "standby hours" will display 1 and finally, if the "hours in total" ranges between 8-12, the "standby hours" will display 1.5.

Now, this all works perfectly.

From here, I have found a solution that generates more tables for the user to input more "start time" and "end time". The problem is that the calculations work only for the first table and not the other generated ones.

Also, I would like to know how to add ALL standby hours that have been generated since the beginning and spit the answer in the text field "Total standby hours".

Here is my HTML Code:

<h1>
Time format is in 24h
</h1>

<div id="table">
<table id="timeTable" class="tg">
  <tr>
    <th class="tg-yw41"></th>
    <th class="tg-yw4l">Start time</th>
    <th class="tg-yw4l">End time</th>
    <th class="tg-yw4l">Hours in total</th>
    <th class="tg-yw4l">Standby hours</th>
  </tr>
  <tr>
  <td class="tg-yw4l">1</td>
    <td class="tg-yw4l"><input class="Time1" value="" placeholder="Enter your start time"/></td>
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time"/></td>
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly=""/></td>
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly=""/></td>
  </tr>
</table>
</div>

<!-- //EXAMPLE OF WHAT HAS TO BE GENERATED
<table class="tg">
  <tr>
    <th class="tg-yw41"></th>
    <th class="tg-yw4l">Start time</th>
    <th class="tg-yw4l">End time</th>
    <th class="tg-yw4l">Hours in total</th>
    <th class="tg-yw4l">Standby hours</th>
  </tr>
  <tr>
  <td class="tg-yw4l">2</td>
    <td class="tg-ywl"><input class="Time1" value="" placeholder="Enter your start time"/></td>
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time"/></td>
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly=""/></td>
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly=""/></td>
  </tr>
</table>
-->
<caption>Total standby hours</caption>&nbsp;<input class="grandtotal" value=""/>
<br>
<button onclick="addTime();">Add Time</button><br>
<button>Remove Time</button>

and here is my JQuery Code:

var numRows = 2, ti = 5; 
var tableCount = 1;

 $(function () {
     function calculate() {
         var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10);
         if(hours < 0)
            hours = 24 + hours;

         $(".Hours").val(hours);

         if (hours>=4)
            $(".Standby").val("1");

         if (hours<=4)
            $(".Standby").val("0.5");

         //if (hours==4 && hours<8) $(".Standby").val("1");

         if (hours>=8 && hours<=12)
            $(".Standby").val("1.5");

         if (hours>12)
            $(".Standby").val("1.5");
     }

     $(".Time1,.Time2").change(calculate);
     calculate();
 });

window.addTime = function () {
    tableCount++;
    $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');

  $('#timeTable' + tableCount).find("input").val("");
 };

 var standby1 = $(this).find('input.Standby').val();
 var standby2 = $(this).find('input.Standby').val();

  /*var standbytotal = (standby); //CALCULATE THE TOTAL OF STANDBY HOURS THAT APPEAR
  $(this).find('input.grandtotal').val(standbytotal ? standbytotal : "");*/

There is also a JSFiddle of my work: http://jsfiddle.net/44NCk/514/

Thank you all in advance for all your help!

Answer 1

For sum of all standby you can get all by $(".Standby") then loop through all and add it.

window.standBy = function() {
  var sum = 0;
  $(".Standby").each(function(index, stand) {
    sum += parseFloat($(stand).val());
  })

  $(".grandtotal").val(sum)
}

Updated fiddle