jquery countdown with dynamic php divs only displaying under first div

Question

This is my first time asking a question here on the great stack overflow. I am having trouble finding any info that helps with this problem.

The following PHP code displays all relevant images from the database dynamically. The visitor can click on the image and ajax processes the click. I reference the data attribute to process that.

I am using jquery.countdown to display a countdown to the expiration date underneath each image. Using the expiration date in the database. The jquery .countdown code works fine under the first element, but does not show at all with the other dynamic elements. And the countdown is not an event, so .on doesn't seem to work in any way I have tried it.

Any help is appreciated.

---

while ($row = mysqli_fetch_assoc($result)) {
        $image = $row['image'];

        // RETRIEVE EXPIRATIONS

        $expirationData = mysqli_query($connection, "SELECT expiration FROM images WHERE image = '$image'");
        $expirationResult = mysqli_fetch_array($expirationData);
        $expirationData = $expirationResult['expiration'];

        ?>
        <div>
            <img id="visitor-click" data-exp="<?php echo $expirationData; ?>" src="<?php echo $image; ?>">


// SHOW COUNTDOWN 
<div id="expiration-countdown"></div>
        </div>
<?php }

?>

<script>
   var target = '<?php echo $expirationData; ?>';
    $("#expiration-countdown").countdown(target, function(event) {
        $(this).text(
            event.strftime('%Dd %Hh %Mm %Ss')
        );
    });
<script>

Answer 1

You'll need to run jQuery.countdown for each expiration element.

First of change, the element IDs to classes as ID values should be unique and only appear once in the DOM.

Secondly, I suggest moving the data-exp attribute from the image to the countdown element itself this makes it easier for grabbing the value. See my example below.

<?php while ($row = mysqli_fetch_assoc($result)): ?>
    <?php
        $image = $row['image'];

        // RETRIEVE EXPIRATIONS
        $expirationData = mysqli_query($connection, "SELECT expiration FROM images WHERE image = '$image'");
        $expirationResult = mysqli_fetch_array($expirationData);
        $expirationData = $expirationResult['expiration'];
    ?>
    <div>
        <img class="visitor-click" src="<?php echo $image; ?>">
        <div class="expiration-countdown" data-exp="<?php echo $expirationData; ?>"></div>
    </div>
<?php endwhile ?>

<script>
    /**
     * Loop through each count down element
     */
    $('.expiration-countdown').each(function() {

        /**
         * This is the current element in the loop iteration
         */
        var $div = $(this);

        /**
         * Get the data-exp attribute value
         */
        var date = $div.data('exp');

        /**
         * Init jQuery.countdown
         */
        $div.countdown(date, function(event) {
            $div.text( event.strftime('%Dd %Hh %Mm %Ss') );
        });
    });
</script>