How to calculate rows in html table using jquery

Question

I want to calculate the time in rows. In the below code only first row is showing total and overtime. but I want to see all the rows doing the same.

Html:

<table border=1>
<tr><th>Time In</th><th>Time Out</th><th>Lunch</th><th>After Lunch Time in</th><th>After Lunch Time out</th><th>Total Hours</th><th>Overtime</th> </tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
</table>

Javascript:

$(document).ready(function(){
var $time1 = $("#start");
var $time2 = $("#end");
var $time3 = $("#lunch");
var $time4 = $("#startafterlunch");
var $time5 = $("#endafterlunch");
var $diff = $("#totalTime");
var $over = $("#overTime");

function updateHours(){   

    var dtStart = new Date("7/20/2015 " + $time1.val());
    var dtEnd = new Date("7/20/2015 " + $time2.val());
    var dtLunch= new Date("7/20/2015 " + $time3.val());
    var dtStartafterlunch = new Date("7/20/2015 " + $time4.val());
    var dtEndafterlunch = new Date("7/20/2015 " + $time5.val());

    var diff = ((dtEnd - dtStart)+(dtEndafterlunch-dtStartafterlunch)) / 1000;

    var totalTime = 0;
    var overTime = 0;

    if (diff > 60*60*8) {

        overTime = formatDate(diff - 60*60*8);
    } else {
        totalTime = formatDate(diff);
    }
    totalTime = formatDate(diff);
    $diff.val(totalTime);
    $over.val(overTime);
}

function formatDate(diff){
    var hours = parseInt( diff / 3600 ) % 24;
    var minutes = parseInt( diff / 60 ) % 60;
    var seconds = diff % 60;

    return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
}

$("#start, #end, #lunch, #startafterlunch, #endafterlunch, #totalTime").on("change, keyup", function(){
    if($time1.val() && $time2.val() && $time4.val() && $time5.val()){
        updateHours();
    }
});
});

http://jsfiddle.net/dpk11/9f66wef7/

please help... thanks!

Answer 1

You shouldn't used id attribute. The id attribute should be used only for unique element in the page. When using the $('#...') selector, jQuery will always return one element, even if there is several corresponding elements in the page.

Moreover, the updateHours method should take in parameter the row of the modified input, so it can recover the input values, and compute total times :

function updateHours(row){   
    var $time1 = row.find('[name="logintime"]');
    var $time2 = row.find('[name="logouttime"]');
    var $time3 = row.find('[name="lunch"]');
    var $time4 = row.find('[name="afterlunchlogin"]');
    var $time5 = row.find('[name="afterlunchlogout"]');
    var $diff = row.find('.totalTime');
    var $over = row.find('.overTime');

    ...
}

Working fiddle : http://jsfiddle.net/9f66wef7/2/

Answer 2

You don't have any sort of marker to differentiate between rows. You have 5 different rows, but each of the inputs has the same ID as the comparable input in the last row. When you're selecting and ID, Jquery only cares about the first one it finds. My advice would be to add a keyup event listener to the inputs, then fire a function that loops through each TR element and calculates the values of the child inputs.