Jquery 只提交第一个元素

Question

I'm trying to store the products ID but it's only storing the first element.

$(document).ready(function() {
  $("#driver").live('click', function(event){
    var product = $("#product").val();
    $("#stage").load('add-exec.php', {"product":product} );
  });
});

and here's the list

<?php

  $sql="SELECT * FROM products ORDER BY name ASC";
  $query=mysql_query($sql);

  while ($row=mysql_fetch_array($query)) {

?>
<tr>
  <td><?php echo $row['name'] ?></td>
  <td><?php echo $row['description'] ?></td>
  <td><?php echo $row['price'] ?>$</td>
  <td>
    <input type="hidden" id="product" value="<?php echo $row['id_product'] ;?>" /><br />
    <div id="stage"></div> 
    <input type="button" id="driver" value="Add" />
</tr>
<?php

  }

?>

Answer 1

Like said ID must be unique. Used class instead for multiple elements. Change into this solution:

// change id into class
<input type="hidden" class="product" value="<?php echo $row['id_product'] ;?>" />     <br />
 <div id="stage"></div> 
 // i added btnAdd class
<input type="button" class="driver btnAdd" value="Add" />

And js should be :

$(document).ready(function() {
    // attach click event on btnAdd class
    $(".btnAdd").live('click', function(event){
       // get product value using selector .prevAll(must be siblings)
       // and filter by it class
       var product = $(this).prevAll('.product').val();
       $("#stage").load('add-exec.php', {"product":product} );
    });
 });