Question

    <script type="text/javascript">
       $(function () {
           var id = $("#id").val();
           var endDate = $("#endtime_" + id).val();
           $('#defaultCountdown_'+id).countdown({until: endDate});
        });
    </script>

    while($row = mysql_fetch_assoc($result))
    {
...
    ?>
    <input type="hidden" id="id" value="<?php echo $row['id'] ?>" />
    <span id="<?php echo "defaultCountdown_" . $row['id'] ?>"></span>
    <input type="hidden" id="<?php echo "endtime_" . $row['id']?>" value="<?php echo $row['end_time'] ?>" />
    <?php
    }

Help me !!!

Answer 1

The problem is, you are creating your hidden inputs with the same value for the html attribute ID:

<input type="hidden" id="id" value="<?php echo $row['id'] ?>" />

This won’t work, because ID’s have to be unique.

Modify your PHP code, to have a unique ID and additional a class name for all hidden inputs, to be able to select them all with jQuery.

while($row = mysql_fetch_assoc($result))
{
?>
<input type="hidden" class="hiddenId" id="id_<?php echo $row['id'] ?>" value="<?php echo $row['id'] ?>" />
<span id="<?php echo "defaultCountdown_" . $row['id'] ?>"></span>
<input type="hidden" id="<?php echo "endtime_" . $row['id']?>" value="<?php echo $row['end_time'] ?>" />
<?php
}

Then iterate thru all hidden inputs by selecting with $(".hiddenId"), get the ID, and start the countdown.

<script type="text/javascript">
$(function () {
    $(".hiddenId").each(function() {
        var id = $(this).val();
        var endDate = $("#endtime_" + id).val();
        $('#defaultCountdown_'+id).countdown({until: endDate});
    });
});
</script>