Set many countdowns in a table with data from a database

Question

I would like to set a countdown for each row in my table but my problem is that the only first countdown is displayed in the table and currently I set the end in the code but I want to add the date in my database then trigger the countdown when it's setted.

there is the code in the php file:

<table>

   <tr>
      <td><?php echo $donnees['type'];?></td>
       <td><?php echo $donnees['number'];?></td>
       <td><?php echo $donnees['weight'];?></td>
       //this date is the date of birth
       <td><?php echo $donnees['date'];?></td>
       <td><p id="ctd"></p></td>

   </tr>
</table>

the script to set the countdown :

var countDownDate = new Date("Sep 20, 2018 15:00:00").getTime();

var x = setInterval(function() {


    var now = new Date().getTime();

    var distance = countDownDate - now;


    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("ctd").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";


    if (distance < 0) {
        clearInterval(x);
        document.getElementById("ctd").innerHTML = "EXPIRED";
    }
}, 1000);

Answer 1

Notice how document.getElementById is singular (getElement and not getElements) getElementById will return the first node with a matching id, so that's why only the first of your timers works. If I'm understanding correctly you have multiple rows and want each one to have an individual countdown from today until the value of $donnees['date'] right? Here's what I would do

Add some classes

Unlike ids, multiple elements can have the same class.

<table>
   <tr class="row_top">
      <td><?php echo $donnees['type'];?></td>
       <td><?php echo $donnees['number'];?></td>
       <td><?php echo $donnees['weight'];?></td>
       //this date is the date of birth
       <td class="col_date"><?php echo $donnees['date'];?></td>
       <td><p class="col_countdown"></p></td>
   </tr>
</table>

Abstract countdown functionality

You will be using your date to countdown process many times - why not make it easier for yourself and make it a function?

function getCountdownText(date)
{
    var now = new Date().getTime();

    var distance = date.getTime() - now; //date is a Date object, so you no longer have to call getTime() on it before passing it to this function
    if(distance < 0) return "EXPIRED";

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    return days + "d " + hours + "h "+ minutes + "m " + seconds + "s ";
}

Note that this function now takes a date, so $donnees['date'] should be a valid date string you can pass to new Date()

Finally, put it all together

Now you can use a single setinterval running every 1 second to do the countdown generating/updating.

var run_every=1000; //1000 ms = 1 second
setInterval(function(){
    var all_rows = document.getElementsByClassName("row_top"); //Notice this says elements - not element - meaning we will be getting an array back.
    for(var i=0;i<all_rows.length;i++)
    {
        var current_row = all_rows[i]; //keep row element so we have a reference to it

        var current_date = current_row.getElementsByClassName("col_date")[0].innerText; // get the date from this row's col_date column
        var countdown_text = getCountdownText(new Date(current_date)); //use our function to get the countdown
        current_row.getElementsByClassName("col_countdown")[0].innerText = countdown_text; //set the text of our countdown td
    }
},run_every);

You can see it in action here