I need some help with javascript code, I try to get A code that will work for multi countdown timers at same page. I tried the code below but no success.
$(".expirydiv").each(function(){
var timer = $(this).attr("data-promo");
var countDownDate = new Date(timer).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);
$(this).text(days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ");
if (distance < 0) {
clearInterval(x);
$(this).text("EXPIRED");
}
}, 1000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expirydiv" data-promo="2021/12/27 10:59:00"></div>
<div class="expirydiv" data-promo="2021/12/19 05:09:00"></div>$(this) is scoped inside setInterval, so you need a reference:
$(".expirydiv").each(function() {
var timer = $(this).attr("data-promo");
var countDownDate = new Date(timer).getTime();
// HERE I CREATE A REFERENCE TO $(this) THAT IS PASSED TO SetInterval
var $this = $(this);
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);
$this.text(days + "d " + hours + "h " +
minutes + "m " + seconds + "s ");
if (distance < 0) {
clearInterval(x);
$this.text("EXPIRED");
}
}, 1000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expirydiv" data-promo="2021/12/27 10:59:00"></div>
<div class="expirydiv" data-promo="2021/12/19 05:09:00"></div>