Search code examples
jquerycountdown

Countdown Jquery

I have problem with jquery , I use the following code to get the dates in format json, this code works correctly.

In the console.log(tiempo) I can see this dates

2015/11/21 12:34:56
ex.html:15 2016/10/10 12:34:56
ex.html:15 2017/10/10 12:34:56
ex.html:15 2018/10/10 12:34:56
ex.html:15 2019/10/10 12:34:56

However in the HTML I only can see the first date I recieve from json.

<script type="text/javascript">
    function tiempo(tiempo){
        console.log(tiempo);
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    jQuery.each(arr, function(index, value) {
        $( ".prueba" ).append('<div class="clock"></div>');
        tiempo(value.now);
    });
</script>

An image is better to explain.

enter image description here

UPDATE

Wihich this code , I only show One date 

<body>
    <div class="clock"></div>
</body>

<script type="text/javascript">
    function tiempo(tiempo){
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    for ( var i = 0 ; i < arr.length ; ++i ) {
        tiempo(arr[i].now);
    }
</script>
Solution

  • The problem is with this piece of code (specifically the selector: .clock):

    $('.clock').countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
 });

    What you are doing here is setting the value of all the div elements with the class clock, not just the last one you created.

    There are a number of solutions to your problem, but the one that requires the minimum amount of change is to use the jquery function last like so (to pick the last element from the set):

    $('.clock').last().countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});