Jquery and multiple forms on a page

I have a several forms that are output from a database on the same page. It works fine when I don't use ajax. When I use Jquery it will only work for the first form. Could anyone point me in the right direction please?

Jquery.....

$('.updateSubmit').live('click', function() {
  var id = $('.id').val();
  var hardSoft = $('.hardSoft').val();
  var brand = $('.brand').val();
  var subCat = $('.subCat').val();
  var subSubCat = $('.subSubCat').val();
  var tProduct = $('.tProduct').val();
  var description = $('.description').val();
  var quantity = $('.quantity').val();
  var price = $('.price').val();
  var tCondition = $('.tCondition').val();
  var featured = $('.featured').val();


  var theData = 'id=' + id + '&hardSoft=' + hardSoft + '&brand=' +
  brand + '&am开发者_开发百科p;subCat=' + subCat +
  '&subSubCat=' + subSubCat + '&tProduct=' + tProduct
  +'&description=' + description +
  '&quantity=' + quantity + '&price=' + price + '&tCondition=' +
  tCondition + '&featured=' + featured;


  $.ajax ({
    type: 'POST',
    url: '/updateGrab.php',
    data: theData,
    success: function(aaa) {
      $('.'+id).append('<div class="forSuccess">'+aaa+'</div>');
    } // end success
  }); // end ajax

  return false;

}); // end click

and my php form......

while ($row = $stmt->fetch()) {

echo " <form action='http://www.wbrock.com/updateGrab.php'
method='post' name='".$id."'>

<input type='hidden' class='id' name='id' value='".$id."' />

Hardware/Software
<input type='text' class='hardSoft' name='hardSoft'
value='".$hardSoft."' />

Brand
<input type='text' class='brand' name='brand' value='".$brand."' />

Sub-category
<input type='text' class='subCat' name='subCat'
value='".$subCat."' />

Sub-Sub-Cat
<input type='text' class='subSubCat' name='subSubCat'
value='".$subSubCat."' />

Product
<input type='text' class='tProduct' name='tProduct'
value='".$tProduct."' />

Description
<input type='text' class='description' name='description'
value='".$description."' />

Qty
<input type='text' class='quantity' name='quantity'
value='".$quantity."' />

Price
<input type='text' class='price' name='price' value='".$price."' />

Cond
<input type='text' class='tCondition'
name='tCondition'value='".$tCondition."' />

Featured
<input type='text' class='featured' name='featured'
value='".$featured."' />


<input type='submit' id='".$id."' class='updateSubmit'
name='updateSubmit' value='Update' />

</form>

<span class='".$id."'></span>

"; // end echo

} // end while loop from database

All the forms and the fields have the same name / class. So when you do

var hardSoft = $('.hardSoft').val();

you only get the value of the first element with class hardSoft.

You can get the "parent" form element with .closest() and use .serialize() to create the data string:

$('.updateSubmit').live('click', function() {

    var $form = $(this).closest('form'); // get the form element this button belongs to
    var theData = $form.serialize(); // generates the data string

    $.ajax ({
       type: 'POST',
       url: '/updateGrab.php',
       data: theData,
       success: function(aaa) {
         // append return data to the current form
         $form.append('<div class="forSuccess">'+aaa+'</div>');
       } // end success
    }); // end ajax
    return false;
)};

Just a note: You can save a lot of time coding if you serialize those forms.

$('.updateSubmit').live('click', function() {
  $.post("updateGrab.php", $("#yourform").serialize()); 
}

Source:

http://api.jquery.com/serialize/

The problem is that selectors like $('.hardSoft') will select several elements (since there are multiple forms) and then .val() will take the value of the first. You could try finding the form using .parents('form') and then taking its children .children('.hardSoft').

$('.updateSubmit').live('click', function() {
    var currentForm = $(this).parent();
    var hardSoft = currentForm.children('.hardSoft').val();
    // ... etc.

On the other hand, this is a rather common task. Take a look at the jQuery Form plugin, which allows you to do the same using much less code. It's probably also more reliable and has several features that you might want to use later in your project.

I guess adding the context within your jQuery selectors could help. Give a try to :

 var hardSoft = $('.hardSoft', $(this).parent()).val();

on every selector