calculate time difference in HH:mm using javascript & jquery

[deepak narahare]

there are 6 input fields out off which 5 input boxes will be filled with time and the result must come on to the 6th input box.
html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" id="start" name="logintime"/>
<input type="time" id="end"name="logouttime" />
<input type="time" id="lunch" name="lunch" />
<input type="time" id="startafterlunch" name="afterlunchlogin"/>
<input type="time" id="endafterlunch" name="afterlunchlogout"/>
<input id="totalTime" readonly="readonly" />

javascript:

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

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

    $diff.val(diff/1000);
  }
$time1.add($time2).on("change, keyup", function(){
    if($time1.val() && $time2.val()){
        updateHours()
    }
});

});

I took the code from an example of adding two time. but i dont know in the keyup how to add the other three time's and the result in the 6th box is in secs, I want to make it as HH:mm. Please help. Thanks!!