multiple jquery countdown timers not displaying inside php loop

Question

i have a php loop that i use to fetch multiple auction records from a database. as a part of the auction i want to have a countdown until it ends. i originally had a problem that only the first record was displaying the countdown timer (working) and determined it was probably because i was giving the jquery selector the same id every time. so i changed it so a new id is generated to give to the div and jquery function on each loop. but now when i look at the result of my script the countdown timer doesnt display in any table row.

   while($row = $stmt->fetch(PDO::FETCH_ASSOC)){        
       $ID = $row['ID'];
            $cdRand = '#row'.$ID;
                $img = $row['img'];
                $desc = $row['description'];
                $name = $row['name'];
                $owner = $row['owner'];
                $cprice = $row['sprice'];
                $iprice = $row['iprice'];
                $incprice = $row['incprice'];
                $etime = $row['etime'];
                $nextBid = $cprice + $incprice;

            $stmt2 = $pdo->prepare("SELECT * FROM user WHERE username = :username");
            $stmt2->bindParam(":username", $owner,PDO::PARAM_STR);
            $stmt2->execute();

            $thisuser2 = $stmt2->fetch(PDO::FETCH_ASSOC);
            $location = $thisuser2['location'];

            echo'

            <tr class="resultindex">

            <td class="imgCol"><a href="displayAuct.php?id='.$ID.'"><img src="'.$img.'" alt="'.$name.'" /></a></td>
            <td class="infoCol">

                <div class="nameDiv">
                    <a class="nameLink" href="displayAuct.php?id='.$ID.'">'.$name.'</a><br/>
                </div>
                <div class="descDiv">
                    <span class="priceLabel2">'.$desc.'</span>
                </div>

                <div class="userdiv">
                    <span class="fromuser">Location: </span><br/>
                    <span class="location">'.$location.'</span>
                </div>
            </td>
            <td style="width:1px; background-color:#330066;" ></td>

            <td class="timerCol">
                <div class="currentp" style="height: 50px;"><span class="priceLabel">Current Bid: </span><br/><span class="price1">$'.$cprice.'</span></div>
                <div id="timeRow" style="height: 30px;">
                    <span class="timeleft">Time Left: </span>
                </div>
                <div id="'.$cdRand.'" style="height:80px;"></div>

                <script type=text/javascript>
                var timestamp = '. $etime * 1000 .';
                var endTime = new Date();
                endTime.setTime(timestamp);



                $("'.$cdRand.'").countdown({until: endTime});

                </script>
            </td>
            </tr>

                ';

i cant quite tell why it doesn't work, the countdown timer is keith woods countdown plugin http://keith-wood.name/countdown.html, any help would be greatly appreciated.

cheers, bundy

Answer 1

This is an ID selector:

#row11

This is a <div> with a valid id attribute:

<div id="row11">

but this isn't a valid id attribute:

<div id="#row11">

Your $cdRand shouldn't contain the # and your jQuery should include the # like this:

$("#'.$cdRand.'").countdown({until: endTime});