What are the best practices for dynamically updating HTML elements with JavaScript countdowns in a PHP loop?

When dynamically updating HTML elements with JavaScript countdowns in a PHP loop, it is important to ensure that each countdown is unique and properly synchronized with the server-side loop. One way to achieve this is by assigning a unique identifier to each countdown element and updating its value using JavaScript setInterval() function. This will ensure that each countdown is independent and accurately reflects the time remaining.

<?php
for($i = 0; $i < 5; $i++) {
    echo "<div id='countdown_$i'></div>";
}
?>

<script>
    // Function to update countdown element
    function updateCountdown(id, endTime) {
        var countdown = document.getElementById(id);
        var interval = setInterval(function() {
            var now = new Date().getTime();
            var distance = endTime - now;
            
            if (distance <= 0) {
                clearInterval(interval);
                countdown.innerHTML = "Countdown expired";
            } else {
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                countdown.innerHTML = minutes + "m " + seconds + "s";
            }
        }, 1000);
    }

    // Initialize countdown for each element
    <?php
    for($i = 0; $i < 5; $i++) {
        $endTime = strtotime("+1 minute", time()); // Set end time for countdown
        echo "updateCountdown('countdown_$i', $endTime);";
    }
    ?>
</script>