Dynamically recalculating total working hours of a generated HTML/JQuery Table

Question

I have an HTML table where the user enters their standby start time and standby end time and they can generate a new row of said table to enter more hours. And at the end, when the user clicks on "calculate" it will calculate the total of compensatory hours earned that have been entered since the beginning and it will be displayed.

The thing I am trying to figure out is how to dynamically recalculate the total compensatory hours earned whenever a row has been removed.

    var numRows = 2,
      ti = 5;
    var tableCount = 1;
    var index=1;
    
    window.standBy = function() {
      var sum = 0;
      $(".Standby").each(function(index, stand) {
        sum += parseFloat($(stand).val());
      })
    
      $(".grandtotal").val(sum)
    }
    
    function calculate() {
      var tr = $(this).closest('tr');
    
      var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
      if (hours < 0) hours = 24 + hours;
      $(".Hours", tr).val(hours);
    
    if (hours <= 4) $(".Standby", tr).val("0.5");
      if (hours == 4) $(".Standby", tr).val("0.5");
      if (hours > 4 && hours < 8 ) $(".Standby", tr).val("1");
      if (hours == 8 ) $(".Standby", tr).val("1");
      if (hours > 8 && hours < 12) $(".Standby", tr).val("1.5");
      if (hours == 12 ) $(".Standby", tr).val("1.5");
      if (hours > 12 && hours < 16) $(".Standby", tr).val("2");
      if (hours == 16 ) $(".Standby", tr).val("2");
    	if (hours > 16 && hours < 20) $(".Standby", tr).val("2.5");
      if (hours == 20) $(".Standby", tr).val("2.5");
      if (hours > 20 && hours < 24) $(".Standby", tr).val("3");
      if (hours == 24) $(".Standby", tr).val("3");
      if (hours > 24 ) alert("You cannot exceed a 24 hour period.");
    
    
    
    }
    $('#table').on('change', ".Time1,.Time2", calculate);
    $('#table').find(".Time1").trigger('change')
    
    
    window.addTime = function() {
      tableCount++;
      $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
      $('#timeTable' + tableCount).find("input").val("");
      index++;
      $('#timeTable' + tableCount + ' .increment').html(tableCount);
      
    };
    
    
     $(document).on('click', 'button.removeTime', function () {
          	 var closestTable = $(this).closest('table');
           if(closestTable.attr('id') != "timeTable") {
           		closestTable.remove();
           }
           tableCount--;
    	   if (tableCount < 1) {
        tableCount = 1;
      }
    	   
    	   
           return false;
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
    Time format is in 24h
    </h3>
    <h6><I>Example: If you want to type in "8 AM", the correct format would be: "8". <br> If you want to type in "8 PM", the correct format would be "20".</I></h6>
    
    <div id="table">
      <table id="timeTable" class="tg">
        <tr>
          <th class="tg-yw41"></th>
          <th class="tg-yw41"></th>
          <th class="tg-yw4l">Standby Start Time</th>
          <th class="tg-yw4l">Standby End Time</th>
          <th class="tg-yw4l">Hours in total</th>
          <th class="tg-yw4l">Compensatory Hours Earned</th>
        </tr>
        <tr>
        <td class="increment">1</td>
        <td class="tg-yw4l"><button class="removeTime">Remove Time</button></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>

    <hr>
    
    <button onclick="addTime();">Add Time</button>
    <br><br>
    
    <button onclick="standBy();">Calculate Total Compensatory Hours Earned</button>
    
    <caption>Total <abbr title="Compensatory">Comp</abbr> hours:</caption>&nbsp;
    <input class="grandtotal" value=""readonly="" />

I tried placing this snippet: $('#table').on('change', ".Time1,.Time2", calculate); somewhere into my "remove time" function. Didn't seem to work.

I also have a JSFiddle up and running: https://jsfiddle.net/yL9q7gvc/

Thank you all in advance for your help!

Answer 1

Simply place your standBy() function inside removeTime button click event as like below. And here is the updated fiddler.

    var numRows = 2,
      ti = 5;
    var tableCount = 1;
    var index=1;
    
    window.standBy = function() {
      var sum = 0;
      $(".Standby").each(function(index, stand) {
        sum += parseFloat($(stand).val());
      })
    
      $(".grandtotal").val(sum)
    }
    
    function calculate() {
      var tr = $(this).closest('tr');
    
      var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
      if (hours < 0) hours = 24 + hours;
      $(".Hours", tr).val(hours);
    
    if (hours <= 4) $(".Standby", tr).val("0.5");
      if (hours == 4) $(".Standby", tr).val("0.5");
      if (hours > 4 && hours < 8 ) $(".Standby", tr).val("1");
      if (hours == 8 ) $(".Standby", tr).val("1");
      if (hours > 8 && hours < 12) $(".Standby", tr).val("1.5");
      if (hours == 12 ) $(".Standby", tr).val("1.5");
      if (hours > 12 && hours < 16) $(".Standby", tr).val("2");
      if (hours == 16 ) $(".Standby", tr).val("2");
    	if (hours > 16 && hours < 20) $(".Standby", tr).val("2.5");
      if (hours == 20) $(".Standby", tr).val("2.5");
      if (hours > 20 && hours < 24) $(".Standby", tr).val("3");
      if (hours == 24) $(".Standby", tr).val("3");
      if (hours > 24 ) alert("You cannot exceed a 24 hour period.");
    
    
    
    }
    $('#table').on('change', ".Time1,.Time2", calculate);
    $('#table').find(".Time1").trigger('change')
    
    
    window.addTime = function() {
      tableCount++;
      $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
      $('#timeTable' + tableCount).find("input").val("");
      index++;
      $('#timeTable' + tableCount + ' .increment').html(tableCount);
      
    };
    
    
     $(document).on('click', 'button.removeTime', function () {
          	 var closestTable = $(this).closest('table');
           if(closestTable.attr('id') != "timeTable") {
           		closestTable.remove();
           }
           tableCount--;
    	   if (tableCount < 1) {
        tableCount = 1;
      }
    	   
    	   standBy();
           return false;
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
    Time format is in 24h
    </h3>
    <h6><I>Example: If you want to type in "8 AM", the correct format would be: "8". <br> If you want to type in "8 PM", the correct format would be "20".</I></h6>
    
    <div id="table">
      <table id="timeTable" class="tg">
        <tr>
          <th class="tg-yw41"></th>
          <th class="tg-yw41"></th>
          <th class="tg-yw4l">Standby Start Time</th>
          <th class="tg-yw4l">Standby End Time</th>
          <th class="tg-yw4l">Hours in total</th>
          <th class="tg-yw4l">Compensatory Hours Earned</th>
        </tr>
        <tr>
        <td class="increment">1</td>
        <td class="tg-yw4l"><button class="removeTime">Remove Time</button></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>

    <hr>
    
    <button onclick="addTime();">Add Time</button>
    <br><br>
    
    <button onclick="standBy();">Calculate Total Compensatory Hours Earned</button>
    
    <caption>Total <abbr title="Compensatory">Comp</abbr> hours:</caption>&nbsp;
    <input class="grandtotal" value=""readonly="" />

Hope it helps.