每行数据表中的倒数计时器

Question

is it possible to have a countdown timer for each row of the datatable using js , html and jquery? I am currently able to do the countdown timer but not sure how to assign this countdown timer to all rows of the datatable. As can see from my code below of the datatable, the countdown timer can only be seen at the first row as id can only be assign once. I need to find way to assign multiple id? Any suggestion?

        for (var i = 0; i < arr.length; i++) {
        t.row.add([

         "<b>" + arr[i].eventname +"</b>" + "</br>" +"</br>",
         "<b>" + arr[i].datetime + "</b>",
         arr[i].venue,
         "<a href='#' class='btn btn-primary btn-rounded' id='btn" + 
          arr[i].eventid + "'>View</a>",
          // for countdown timer
           "<div id = 'day' ></div>:<div id = 'hour'></div>:<div id = 'min'> 
          </div>:<div id = 'sec'></div></div>"

        ]).draw(false);

Answer 1

Yuo could assign the timer's digits by class instead of id (use .day , .hour , .min , .sec , not #day , #hour etc)

for (var i = 0; i < arr.length; i++) {
  t.row.add([

    "<b>" + arr[i].eventname +"</b>" + "</br>" +"</br>",
    "<b>" + arr[i].datetime + "</b>",
    arr[i].venue,
    "<a href='#' class='btn btn-primary btn-rounded' id='btn" + 
    arr[i].eventid + "'>View</a>",
    // for countdown timer
    "<div class = 'day' id = 'day" + arr[i].eventid + "' ></div>:<div class = 'hour' id = 'hour" + arr[i].eventid + "'></div>:<div class = 'min' id = 'min" + arr[i].eventid + "'> 
    </div>:<div class = 'sec' id = 'sec" + arr[i].eventid + "'></div></div>"

  ]).draw(false);