Таймер обратного отсчета синхронизируется по всем элементам, а не по отдельности ⇐ Html

[Anonymous]

У меня есть следующий скрипт, представляющий собой таймер обратного отсчета, который отображает часы, минуты и секунды (00:00:00:00), оставшиеся до достижения указанной даты. На моей HTML-странице есть 4 объекта с таймером. Скрипт работает, однако таймер один и тот же для всех четырех объектов, несмотря на то, что каждый из них имеет уникальные значения, которые должны изменить обратный отсчет. Простите, я на самом деле работаю в Webflow, но, надеюсь, это не создаст проблем:

Код: Выделить всё

// all the objects with the timer
var wrappers = document.querySelectorAll(".collection-item");
wrappers.forEach(function(wrapper) {
var countDownDate = new Date("July 15, 2023 00: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);

// update the HTML elements within the current wrapper
wrapper.querySelector("#day").innerHTML = days;
wrapper.querySelector("#hour").innerHTML = hours;
wrapper.querySelector("#minute").innerHTML = minutes;
wrapper.querySelector("#second").innerHTML = seconds;

if (distance < 0) {
clearInterval(x);
carWrapper.querySelector(".announcement").innerHTML = "Yay!";
}
}, 1000);
});

Каждый объект является частью списка коллекций в Webflow, который можно просмотреть с помощью следующего HTML:

Код: Выделить всё

[url=/books/000001]

00
00
00
00

[/url]

script from above here

Не знаю, что не так/как заставить каждый таймер работать независимо для каждого объекта. Опять же, таймер ведет обратный отсчет правильно, но все 4 объекта используют время 4-го объекта вместо своего собственного.

Подробнее здесь: https://stackoverflow.com/questions/766 ... dividually