Calculating differences between two tables using jQuery
<p>If this question has already been asked please let me know where to find the answer.</p>

<p>I am setting up a "spreadsheet" style form which contains three different tables. The first table will contain a list of employees and their start time/end time as well as the total time worked. The second table will contain the employees scheduled start time/end time/total time. The third table should contain the difference between the actual worked time and the scheduled number of hours worked.</p>

<p>I have been able to get the calculations for the total time worked/scheduled working but getting the jquery formula to calculate the difference is not working.</p>

<p>Here is a jsfiddle containing the page: <a href="https://jsfiddle.net/Dragoonman/6oyauwr8/" rel="nofollow">https://jsfiddle.net/Dragoonman/6oyauwr8/</a></p>

<p>jQuery</p>

<pre><code>// JavaScript Document
$(document).ready(function() {
  var employees = ['Greg Weiland', 'Alicia Hawly', 'Charlen Connoly',
    'Dakota Giles', 'Donovan Cole', 'Robert Hill', 'Douglas Spirs',
    'Casey Green', 'Jared Peterson', 'Elizabeth P', 'Carl Mark', 
    'Carma J.', 'Ike J.', 'Elias H.'
  ];

  //This for each loop will write the employee names in the array above
 into their own rows
  for (i = 0; i &lt; employees.length; i++) {
$('#footer').before('&lt;tr class="rowEmployee"&gt;&lt;th&gt;' + employees[i] +
  '&lt;/th&gt;&lt;td&gt;&lt;input class="Time1" type="text"&gt;&lt;/td&gt;' +
  '&lt;td&gt;&lt;input class="Time2" type="text"&gt;' +
  '&lt;/td&gt;&lt;td&gt;&lt;input class="Hours"&gt;&lt;/td&gt;&lt;/tr&gt;');
$('#footer2').before('&lt;tr class="rowSchedule"&gt;&lt;td&gt;&lt;input class="Time3" type="text"&gt;&lt;/td&gt;' +
  '&lt;td&gt;&lt;input class="Time4" type="text"&gt;&lt;/td&gt;' +
  '&lt;td&gt;&lt;input class="Hours2"&gt;&lt;/td&gt;&lt;/tr&gt;');
$('#footer3').before('&lt;tr class="rowDiff"&gt;&lt;td&gt;&lt;input class="diff"&gt;&lt;/td&gt;&lt;/tr&gt;');
  }

$('.Time2').on('change', function() {
$('.rowEmployee').each(function() {
  var time1 = $('.Time1', this).val().split(':');
  var time2 = $('.Time2', this).val().split(':');
  //The following calculations turn minutes into a fraction to make the math easier
  var hoursWorked1 = parseInt(time1[0]) + ((parseInt(time1[1]) == 0) ? 0 : (parseInt(time1[1]) / 60));
  var hoursWorked2 = parseInt(time2[0]) + ((parseInt(time2[1]) == 0) ? 0 : (parseInt(time2[1]) / 60));
  //Here is your difference in hours calculation below
  var diff = hoursWorked2 - hoursWorked1;
  //Finally, write the total hours worked to the textbox, rounding to nearest hundredth
  $('.Hours', this).val(Math.round(diff * 100) / 100);
});
});

$('.Time4').on('change', function() {
$('.rowSchedule').each(function() {
  var time1 = $('.Time3', this).val().split(':');
  var time2 = $('.Time4', this).val().split(':');
  //The following calculations turn minutes into a fraction to make the math easier
  var hoursWorked1 = parseInt(time1[0]) + ((parseInt(time1[1]) == 0) ? 0 : (parseInt(time1[1]) / 60));
  var hoursWorked2 = parseInt(time2[0]) + ((parseInt(time2[1]) == 0) ? 0 : (parseInt(time2[1]) / 60));
  //Here is your difference in hours calculation below
  var diff = hoursWorked2 - hoursWorked1;
  //Finally, write the total hours worked to the textbox, rounding to nearest hundredth
  $('.Hours2', this).val(Math.round(diff * 100) / 100);
});
});

$('.Time2').on('change', function() {
$('.rowDiff').each(function() {
  var time1 = $('#footer.rowEmployee.Hours', this).val();
  var time2 = $('#footer2.rowSchedule.Hours2', this).val();
  var diff = time2 - time1;
  $('.diff', this).val(diff);
});
});
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;h3&gt;IMPUT ALL TIMES IN MILITARY FORMAT INCLUDING ":"&lt;/h3&gt;
&lt;h4&gt;*times after midnight for same working day should continue to 25:00+*&lt;/h4&gt;
&lt;table id="actual" cellspacing="0px"&gt;
  &lt;tr id="header"&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Start Time&lt;/th&gt;
    &lt;th&gt;End Time&lt;/th&gt;
    &lt;th&gt;
      Total Time
      &lt;br/&gt; Worked
    &lt;/th&gt;
  &lt;/tr&gt;
  &lt;!-- Add the ID of footer so the JS knows where to append the rows containing employee names --&gt;
  &lt;tr id="footer"&gt;
    &lt;td colspan="4"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;table id="schedule" cellspacing="0px"&gt;
  &lt;tr&gt;
    &lt;th&gt;
      Scheduled
      &lt;br/&gt; Start Time
    &lt;/th&gt;
    &lt;th&gt;
      Scheduled
      &lt;br/&gt; End Time
    &lt;/th&gt;
    &lt;th&gt;
      Total Time
      &lt;br/&gt; Scheduled
    &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr id="footer2"&gt;
    &lt;td colspan="4"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;table id="difference" cellspacing="0px"&gt;
  &lt;tr&gt;
    &lt;th&gt;
      Difference
      &lt;br/&gt;&amp;nbsp;
    &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr id="footer3"&gt;
    &lt;td colspan="4"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Any help that can be provided would be greatly appreciated </p>