javascript count up from start date and time, multiple targets

Question

Hi I am building a time tracking app and I am saving a bunch of start dates and times in a database and if there is not end time I am using the code in this stackoverflow answser only difference if I have multiple targets for example my html code is as follows;

<ul class="draggable connected-sortable tasks ui-droppable" id="In Progress" data-assigned-status-id="6" style="height: 799px;">
    <li class="clearfix ui-draggable ui-draggable-handle" style="position: relative;">
        <div class="task_info clearfix">
            <!-- <p></p>
                                        <p></p> -->
            <p>Go to shops</p>
            <br>
            <br>
            <br> <a href="http://app.local/task/1">View more info</a>

        </div>
        <div class="user_info clearfix">

            <p><strong>User</strong>
            </p>
        </div>
        <br>
        <div class="form-group">
            <button type="button" class="btn btn-danger track_time" data-toggle="modal" data-id="109" data-post="data-php" data-action="track_time" data-href="http://app.local/timer/ajax/109">Track your time</button>
        </div>
        <div class="time-elapsed">0 day(s), 2:38:0</div>
        <div class="date_start_time" data-date-time="2015,10,27 20:08:00"></div>
        <div class="alerts-wrapper"></div>
    </li>

    <li class="clearfix ui-draggable ui-draggable-handle" style="position: relative;">
        <div class="task_info clearfix">
            <!-- <p></p>
                                        <p></p> -->
            <p>Clean room</p>
            <br>
            <br>
            <br> <a href="http://app.local/task/2">View more info</a>

        </div>
        <div class="user_info clearfix">

            <p><strong>User</strong>
            </p>
                </div>
        <br>
        <div class="form-group">
            <button type="button" class="btn btn-danger track_time" data-toggle="modal" data-id="86" data-post="data-php" data-action="track_time" data-href="http://app.local/timer/ajax/86">Track your time</button>
        </div>
        <div class="time-elapsed">0 day(s), 2:38:0</div>
        <div class="date_start_time" data-date-time="2015,10,27 22:03:00"></div>
        <div class="alerts-wrapper"></div>
    </li>
</ul>

and the javascript I am using is as follows;

 var startDateTime = new Date($('.date_start_time').attr('data-date-time'));

                    var startStamp = startDateTime.getTime();
                    var newDate = new Date();
                    var newStamp = newDate.getTime();

                    var timer;

                    function updateClock() {

                        newDate = new Date();
                        newStamp = newDate.getTime();
                        var diff = Math.round((newStamp - startStamp) / 1000);

                        var d = Math.floor(diff / (24 * 60 * 60));
                        /* though I hope she won't be working for consecutive days :) */
                        diff = diff - (d * 24 * 60 * 60);
                        var h = Math.floor(diff / (60 * 60));
                        diff = diff - (h * 60 * 60);
                        var m = Math.floor(diff / (60));
                        diff = diff - (m * 60);
                        var s = diff;

                        $(".time-elapsed").html(d + " day(s), " + h + ":" + m + ":" + s);
                    }

                    setInterval(updateClock, 1000);

But as you can see in the html above the time elapsed div has the same value whereas the following values are different;

<div class="date_start_time" data-date-time="2015,10,27 22:03:00">
<div class="date_start_time" data-date-time="2015,10,27 20:08:00">

so i should have different time elapsed values, any ideas what I'm doing wrong here?

Answer 1

The problem you are having is that you have 2 elements with the same class name and you are running the function just once for all elements when you should be running the function for each element with that class name. Take a look at your error

1.

<div class="time-elapsed">0 day(s), 2:38:0</div>
<div class="date_start_time" data-date-time="2015,10,27 20:08:00"></div>
<div class="alerts-wrapper"></div>

2.

<div class="time-elapsed">0 day(s), 2:38:0</div>
<div class="date_start_time" data-date-time="2015,10,27 22:03:00"></div>
<div class="alerts-wrapper"></div>

Now what I have done was adjusted your Javascript function to loop through every element and run the function on the current element.

    var timer;

function updateClock() {
    $('.date_start_time').each(function() {
        var startDateTime = new Date( $(this).attr('data-date-time') );
        startStamp = startDateTime.getTime();
        newDate = new Date();
        newStamp = newDate.getTime();
        var diff = Math.round((newStamp - startStamp) / 1000);

        var d = Math.floor(diff / (24 * 60 * 60));
        /* though I hope she won't be working for consecutive days :) */
        diff = diff - (d * 24 * 60 * 60);
        var h = Math.floor(diff / (60 * 60));
        diff = diff - (h * 60 * 60);
        var m = Math.floor(diff / (60));
        diff = diff - (m * 60);
        var s = diff;

        $(this).parent().find("div.time-elapsed").html(d + " day(s), " + h + ":" + m + ":" + s);
    });
}

setInterval(updateClock, 1000);

As you can see I don't just use class time-elapsed to update the time but I climb up to the parent and from the parent which is < l i > and I find the the div with the class .time-elapsed and update it.

Answer 2

The issue is in

$('.date_start_time').attr('data-date-time')

There are multiple elements with that class, so the attr always returns value of first one.

Modify updateClock function to accept the elements as parameters. Then do:

$(".tasks li").each(function (idx, el){
   var timeElasped = $(this).find(".time-elapsed");
   var startTime = $(this).find(".date_start_time");
   setInterval( function() { 
       updateClock(startTime, timeElasped); 
   }, 500 );

});