submitting dynamic form and updating dom with jquery

[ZendDeveloper]

Hi,

I have a shopping basket which has multiple rows with a form surrounding them. On the quantity of the individual items I have buttons that trigger jquery events that update basket totals elsewhere on the page. To do this they send an ajax request that updates the basket and passes back various values. The basket rows are all dynamically generated. The problem is that I am unsure how to identify which basket row has been updated and so pass the values through to the Ajax call and then update the correct row on the page.

The html for the form is as folows:

<form id="checkout_cart_form" method="post">
<table id="shopping-cart-table" class="data-table box-table shopping-cart" border="0" cellspacing="0">
            <col width="220">
            <col>
            <col width="75">
            <col width="80">

            <col width="75">
            <col width="80">
            <thead>

    </thead><thead>
        <tr class="first last">
                    <th><span>Picture of item</span></th>
                    <th>Item</th>

                    <th class="a-center">Price</th>
                    <th class="a-center">Quantity</th>
                    <th class="a-center">Item total</th>

                    <th class="a-center"><span>Remove</span></th>
                </tr>
            </thead>

    <tbody>
            

<tr class="first odd">
                    <td class="prod-img"><a href="[URL unfurl="true"]http://mysite.com/product_link.html"><img[/URL] src="[URL unfurl="true"]http://mysite.com/product/thumbnail.jpg"[/URL] width="75"></a></td>
                    <td class="attributes-col"><strong><a href="[URL unfurl="true"]http://mysite.com/product_link.html"></a></strong>[/URL]
                    <!-- item custom options -->

                    <!-- / -->
                    </td>

                    <td class="a-right">
                    <div class="cart-price">
                    <span class="price"> <span class="price">£8.00</span></span>            
                    </div>
                    </td>
                    <td class="a-center">
                    <div class="quantity-btns">

                        <button class="subtract"></button>

                        <input class="quantity-box" name="cart[69][qty]" id="addtocart_form_qty_69" value="6" type="text">
                        <button class="add"></button>
                        
                    </div>
                    </td>
                    <td class="a-right">
                    <div class="cart-price">
                    <span class="price" id="row_total"> <span class="price">£48.00</span></span>            
                    </div>

                    </td>
                    <td class="a-center last"><a class="remove" href="[URL unfurl="true"]http://mysite.com/removelink">Remove</a></td>[/URL]
                </tr>            

            

<tr class="last even">
                    <td class="prod-img"><a href="[URL unfurl="true"]http://mysite.com/product_link2.html"><img[/URL] src="[URL unfurl="true"]http://mysite.com/product_link2/thumbnail.jpg"[/URL] width="75"></a></td>
                    <td class="attributes-col"><strong><a href="[URL unfurl="true"]http://mysite.com/product_link2.html">Product[/URL] name</a></strong>
                    <!-- item custom options -->

                    <!-- / -->
                    </td>
                    <td class="a-right">
                    <div class="cart-price">
                    <span class="price"> <span class="price">£22.50</span></span>            
                    </div>
                    </td>
                    <td class="a-center">

                    <div class="quantity-btns">

                        <button class="subtract"></button>
                        <input class="quantity-box" name="cart[70][qty]" id="addtocart_form_qty_70" value="6" type="text">
                        <button class="add"></button>
                        
                    </div>
                    </td>
                    <td class="a-right">
                    <div class="cart-price">

                    <span class="price" id="row_total"> <span class="price">£135.00</span></span>            
                    </div>

                    </td>
                    <td class="a-center last"><a class="remove" href="[URL unfurl="true"]http://mysite.com/removelink">Remove</">Remove</a></td>[/URL]
                </tr>            

        </tbody>
</table>


</form>

The Jquery I am using for the form is:

jQuery(document).ready(function(){
			
			
					        jQuery(".add").click(function()
					        {
					        	
					            var currentVal = parseInt(jQuery(".quantity-box").val());
					            if (currentVal != NaN)
					            {
					                jQuery(".quantity-box" ).val(currentVal + 1);
					            }
					        	cartData = jQuery("#checkout_cart_form").serialize();	
					        	
					        	jQuery.getJSON("/checkout/cart/updatePost",cartData, function(json){ 
					        		
					        		jQuery('#basket-qty').replaceWith(json.basketqty);
					        		jQuery('#shopping-cart-totals-table').replaceWith(json.updatetotals) ;
					        		jQuery('#row-total').replaceWith(json.rowtotal);

					        	});
					        	
							
								return false;
								
					        });
                                             });

I have only included the Jquery for the 'add' button, but if someone could have a look and let me know how I can get it to only update the correct table row that would be great.