Question

I have a site here

As you can see the timer only runs on the first product. Can someone give me an idea as to how I can let the other 2 product have timer as well? Also I am having problem on the ajax part with the #bid, how to make each product has its own #bid?

<?php

include "connect.php";
$query= "select * from product";
$result= mysql_query($query);

while( $record= mysql_fetch_array($result) ){
    $product_id= $record['product_id'];
    $product_name= $record['product_name'];
    $retail_price= $record['retail_price'];
    $product_price= $record['product_price'];

    echo '<div id="product">';
    echo '<div>'.$product_name.'</div>';
    echo '<img style="width: 90%;" src="images/'.$product_id.'.png"/>';
    echo 'Retail Price';
    echo '<div>'.$retail_price.'</div>';

    echo 'Time Left';        

    $query= "select * from product where product_id='$product_id'";
    $result2= mysql_query($query);
    $record= mysql_fetch_object($result2);
    $time= $record->end_time;

    date_default_timezone_set('Asia/Singapore');
    $unix_time= strtotime($time);

    echo '<br/>

    <div id="hoursBox" style="display: inline;"></div>:

    <div id="minsBox" style="display: inline;"></div>:

    <div id="secsBox" style="display: inline;"></div>

    <br/>';

    echo 'Current Price';
    echo '<div>RM '.$product_price.'</div>';

    echo '<input type="submit" id="bid" value="Bid"/>'; 

    echo '</div>';

    } 

?>

<script type="text/javascript">

var end_time = <?php echo $unix_time; ?>;

$(document).ready(function(){

   $("#bid").click(function(){

      $.ajax({
         url: 'increase_time.php',
         type: 'post',
         data: 'end_time='+end_time,
         success: function(response){
             end_time= response;
         }
      });

   });

});

var stop= setInterval('countdown()',1000);

function countdown() {        

        var now = new Date();

        var now_time= now.getTime()/1000;
        now_time= Math.floor(now_time);

        var sec = end_time- now_time;

        if(sec<=0){
            clearInterval(stop);          
        }  

        sec= Math.floor(sec);
        var min = Math.floor(sec / 60);
        var hour = Math.floor(min / 60);

        hour %= 24;
        min %= 60;
        sec %= 60;

        document.getElementById("hoursBox").innerHTML = hour;
        document.getElementById("minsBox").innerHTML = min;
        document.getElementById("secsBox").innerHTML = sec;                 
 }
</script>

<script type="text/javascript">countdown();</script>

Answer 1

Change your element id from class

$("#bid").click(function(){

});

into

$(".bid").click(function(){

 //$(this).val() and what ever for current bid

});

And i suggest you to use jquery countdown plugin.