Countdown of each dom selector with respect timezone Moment js

Question

I am trying to achieve countdown between now and endtime for multiple table rows with same class selector. I have read all other related posts, but my jsfiddle gives script error.

My html page:

<table>
  <tr>
    <td>Blocked-1</td>
    <td class="bidtime-countdown" data-bidtime="2022-02-09 01:00:00" data-endtime="2022-02-11 04:00:00"></td>
  </tr>
  <tr>
    <td>Sold-1</td>
    <td>2022-02-09 00:20:00</td>
  </tr>
  <tr>
    <td>Blocked-2</td>
    <td class="bidtime-countdown" data-bidtime="2022-02-09 01:30:00" data-endtime="2022-02-11 05:30:00"></td>
  </tr>
</table>

The endtime provided in html is Asia/Dubai local timezone. So I need countdown in relation with this local timezone.

I could not found solution for this. Any guide ? Below is my jsfiddle that i was working on.

JSFIDDLE

Answer 1

It seems you are using diff wrong and also it works on objects only. Try toDate with jquery countdown instead.

Try this:

$(function() {
  $('[data-endtime]').each(function() {
    var $this = $(this);
    var end = $(this).data('endtime');
    $this.countdown(moment.tz(end, "Asia/Dubai").toDate(), function(event) {
      $this.html(event.strftime('%d day %H:%M:%S'));
    });
  });
});

demo

Add: moment.min.js, moment-timezone-with-data.js, and jquery-countdown.min.js libraries as in demo.