Looping foreach, grabbing data from db and insert into JS

Question

I have some JS that display a countdown timer, but this is only showing for one item on the page and i need it to be used in the PHP foreach loop I have. this code below is within the foreach loop.

                 <div class="countdown-timer">
                    <strong>Time Left - </strong> <span id="countdown"></span>
                </div>

                <script type="text/javascript" charset="utf-8">

                    // set the date we're counting down to
                    var target_date = new Date("<?php echo $listing->ends; ?>").getTime(); // echo would return 2014-07-15

                    // variables for time units
                    var days, hours, minutes, seconds;

                    // get tag element
                    var countdown = document.getElementById("countdown");

                    // update the tag with id "countdown" every 1 second
                    setInterval(function () {

                        // find the amount of "seconds" between now and target
                        var current_date = new Date().getTime();
                        var seconds_left = (target_date - current_date) / 1000;

                        // do some time calculations
                        days = parseInt(seconds_left / 86400);
                        seconds_left = seconds_left % 86400;

                        hours = parseInt(seconds_left / 3600);
                        seconds_left = seconds_left % 3600;

                        minutes = parseInt(seconds_left / 60);
                        seconds = parseInt(seconds_left % 60);

                        // format countdown string + set tag value
                        countdown.innerHTML = days + " days " + hours + " hrs "
                        + minutes + " min " + seconds + " secs ";

                    }, 1000);

                </script>

Answer 1

You'll need to create a unique ID for each element, that way you can reference each element individually.

In addition, you'd be wise to take the javascript block out of the php foreach loop. Instead, create an array of each element's ID, then use that array to setInterval on each item via javascript. That way, you don't repeat a bunch of JS code.

Rough example:

<!-- php code here to loop and create these html elements -->
<div class="countdown-timer">
        <strong> Time Left - </strong> <span id="countdown-INSERT_ID_FROM_PHP_HERE"></span>
</div>
<!--end php code to create html -->

<script type="text/javascript">
    var createCountdown = function(id, date) {
        var target_date = new Date(date).getTime();
        var days, hours, minutes, seconds;
        var countdown = document.getElementById(id);

        setInterval(function() {
            var current_date = new Date().getTIme();
            var seconds_left = (target_date - current_date) / 1000;

            days = parseInt(seconds_left / 86400);
            seconds_left = seconds_left % 86400;

            hours = parseInt(seconds_left / 3600);
            seconds_left = seconds_left % 3600;

            minutes = parseInt(seconds_left / 60);
            seconds = parseInt(seconds_left % 60);

            // format countdown string + set tag value
            countdown.innerHTML = days + " days " + hours + " hrs "
        + minutes + " min " + seconds + " secs ";
        }, 1000);
    };

    // USE PHP TO MAKE THIS ARRAY
    // POPULATE IT WITH OBJECTS THAT LOOK LIKE THIS
    // { id: "countdown-6", date: "2014-07-01" }
    var allCounters = [
        { id: "countdown-6", date: "2014-07-01" }
    ];

    allCounters.forEach(function(counter) {
        createCountdown(counter.id, counter.date);
    });
</script>