Same countdown value appearing for different dates

Question

Given this HTML:

<span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>

<span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>

I am trying to display the value of data-countdown-date attribute as countdown text in the span using this JS:

document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    for (let item of list) {
        // console.log(item.getAttribute("data-countdown-date"));
        // shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.

        // Set the date we're counting down to
        var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
        
        // console.log(countDownDate);
        // shows 1598860800000 and 1609333200000

        // Update the count down every 1 second
        var x = setInterval(function () {
            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            // console.log(days);

            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);

            // Display the result in the element with id="countdown-date"
            item.innerHTML =
                days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                item.innerHTML = 'EXPIRED';
            }
        }, 1000);
    };
});

The problem is that both the countdown dates keep showing the same values.

Like this: 136d 1h 56m 26s (initial value when the page is loaded).

Any help would be appreciated.

source for the JS code: https://www.w3schools.com/howto/howto_js_countdown.asp.

Answer 1

document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    function processdate(countDownDate, item) {
        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        // console.log(days);

        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);

        // Display the result in the item
        item.innerHTML =
            days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            item.innerHTML = 'EXPIRED';
        }
    }

    for (let item of list) {
        // Set the date we're counting down to
        var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();

        // Update the count down every 1 second
        var x = setInterval(processdate, 1000, countDownDate, item);
    }
});

Answer 2

countDownDate needs to be declared inside the interval function.

When it's declared outside the variable is overwritten.

document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    for (let item of list) {
        // console.log(item.getAttribute("data-countdown-date"));
        // shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.


        // console.log(countDownDate);
        // shows 1598860800000 and 1609333200000

        // Update the count down every 1 second
        var x = setInterval(function () {
            // Set the date we're counting down to
            var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            // console.log(days);

            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);

            // Display the result in the element with id="countdown-date"
            item.innerHTML =
                days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                item.innerHTML = 'EXPIRED';
            }
        }, 1000);
    };
});

    <span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>
    <span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>