when I repeat data retrived from mysql using php, Javascript work only on the first record?

Question

I have a little problem that drove me crazy the thing is , I'm retrieving records from mysql database and displaying these records , under each record there's should be a countdown javascript clock which takes the value from mysql It works only with the first record and the other records are only text , Here's the HTML , PHP and JS:

<a>
    <div>
    <? echo $row['Device Name']; ?>
    </div>
    <? $Remain = $row['Remaining Time']; ?>
    <font color="red" size="6"><span id="countdown"> <? echo $Remain; ?></span></font>
    <img src="img/stop.png" /> 
    </a>  



<script type="text/javascript">

    // Initialize clock countdowns by using the total seconds in the elements tag

   secs       =  parseInt(document.getElementById('countdowno').innerHTML,10);
   setTimeout("countdown('countdowno',"+secs+")", 1000);




    /**
     * Countdown function
     * Clock count downs to 0:00 then hides the element holding the clock
     * @param id Element ID of clock placeholder
     * @param timer Total seconds to display clock
     */
    function countdown(id, timer){
        timer--;
        minRemain  = Math.floor(timer / 60);
        secsRemain = new String(timer - (minRemain * 60));
        // Pad the string with leading 0 if less than 2 chars long
        if (secsRemain.length < 2) {
            secsRemain = '0' + secsRemain;
        }

        // String format the remaining time
        clock      = minRemain + ":" + secsRemain;
        document.getElementById(id).innerHTML = clock;
        if ( timer > 0 ) {
            // Time still remains, call this function again in 1 sec
            setTimeout("countdown('" + id + "'," + timer + ")", 1000);
        } else {
            // Time is out! Hide the countdown
            document.getElementById(id).style.display = 'none';
        }

    }
</script>

Please Help me to be able to make the js counter work for each record Thanks

Answer 1

The id for HTML element is expected to be unique, you can use class instead if you want to select all wanted element by one name.

<span id="countdown">

You can add class:

<span class="countdown">

Answer 2

The problem is that you use the id countdown for multiple spans, but everyone has to have another unique id, so you can point to each one.

<?php $id = uniqid(); /* create unique id for each row */ ?>
<a>
    <div>
    <? echo $row['Device Name']; ?>
    </div>
    <? $Remain = $row['Remaining Time']; ?>
    <font color="red" size="6"><span id="countdown_<?php echo $id; ?>"> <? echo $Remain; ?></span></font>
    <img src="img/stop.png" /> 
    </a>  



<script type="text/javascript">

    // Initialize clock countdowns by using the total seconds in the elements tag

   secs       =  parseInt(document.getElementById('countdown_<?php echo $id; ?>').innerHTML,10);
   setTimeout("countdown('countdown_<?php echo $id; ?>',"+secs+")", 1000);




    /**
     * Countdown function
     * Clock count downs to 0:00 then hides the element holding the clock
     * @param id Element ID of clock placeholder
     * @param timer Total seconds to display clock
     */
    function countdown(id, timer){
        timer--;
        minRemain  = Math.floor(timer / 60);
        secsRemain = new String(timer - (minRemain * 60));
        // Pad the string with leading 0 if less than 2 chars long
        if (secsRemain.length < 2) {
            secsRemain = '0' + secsRemain;
        }

        // String format the remaining time
        clock      = minRemain + ":" + secsRemain;
        document.getElementById(id).innerHTML = clock;
        if ( timer > 0 ) {
            // Time still remains, call this function again in 1 sec
            setTimeout("countdown('" + id + "'," + timer + ")", 1000);
        } else {
            // Time is out! Hide the countdown
            document.getElementById(id).style.display = 'none';
        }

    }
</script>

Additionally it would be better, if you define countdown() once outside the loop and not in every row new