[Resolvido] multiplos botões com gif animado

Galera, assim, crio uma listagem em uma tabela que vai se multiplicando, e crio um botão que irá enviar ajax para salvar esses dados.

Só que assim, eu testo o ajax e no beforeSend: é para ele mostrar na minha div , um gif animado de loading... só que ele não funciona, não consigo fazer com que ele descubra qual foi clicado e apareça...

Alguem teria alguma ideia ?

código:

Ps.:tem alguns códigos em Smarty

 <table class="list" id="produtos">
 <tr>
 <th>Ref.</th>
 <th>Nome</th>
 <th>De</th>
 <th>Para</th>
 <th>Prazo</th>
 <th>Peso</th>
 <th>Alt.</th>
 <th>Larg.</th>
 <th>Comp.</th>
 <th class="tools"> </th>
 </tr>
 {foreach from=$products item="product"}
 <form class="form">
 <tr>
 <td nowrap="nowrap">
 {$product.reference}
 <!--<a href="#" title="Atributos" onClick="var w = window.open('{$rootUrl}manager/referenceAttribute/create/reference/{$product.reference}', 'attributes', 'width=800,height=500,scrollbars=yes'); w.focus(); return false;">
 <img src="{$rootUrl}imgs/manager/ico_atributos.png" alt="Atributos"/ align="middle">
 </a>-->
 </td>
 <td>

 {textField object="product" property="name" class="text3"}
 </td>
 <td>
 {assign var="shopProduct" value=$product->shopProduct[0]}
 R$ {textField object="shopProduct" property="value" class="text2"}
 <!--	{if $product.imageThumbName != "" }
 <a href="{$rootUrl}upload/referenceAttribute/{$product.imageThumbName}" target="_blank">Clique para ver</a>
 {/if} -->
 </td>
 <td>
 {assign var="shopProduct" value=$product->shopProduct[0]}
 R$ {textField object="shopProduct" property="promotionalValue" class="text2"}
 <!--{$product.isActiveString}-->
 </td>
 <td>
 {assign var="shopProduct" value=$product->shopProduct[0]}
 {textField object="shopProduct" property="deliveryTime" class="text2"}
 </td>
 <td>
 <input type="text" name="weight" value="{$product.weight}" class="text2" />
 <!--{$product.hasStockString}-->
 </td>
 <td>
 <input type="text" name="height" value="{$product.height}" class="text2" />
 <!--<a href="#" onClick="var w = window.open('{$rootUrl}manager/productRelated/create/id/{$product.id}', 'product_related', 'width=800,height=500,scrollbars=yes'); w.focus(); return false;">Clique para ver</a>-->
 </td>
 <td>
 <input type="text" name="width" value="{$product.width}" class="text2" />
 </td>
 <td>
 <input type="hidden" value="{$product.reference}" name="reference" />
 <input type="hidden" name="id" value="{$product.id}" class="text2" />
 <input type="text" name="length" value="{$product.length}" class="text2" />
 </td>
 <td>
 <button class="o">Ok</button>
 <div class="loading"></div>
 <a href="#" title="Atributos" onClick="var w = window.open('{$rootUrl}manager/referenceAttribute/create/reference/{$product.reference}', 'attributes', 'width=800,height=500,scrollbars=yes'); w.focus(); return false;">
 <img src="{$rootUrl}imgs/manager/ico_atributos.png" alt="Atributos" border="0" align="middle">
 </a>

 {linkTo module="manager" action="edit" id=`$product->id` htmlTitle="Editar"}<img src="{$rootUrl}imgs/manager/ico_edit.png" alt="Editar"/>{/linkTo}

 {linkTo module="manager" action="delete" id=`$product->id` htmlTitle="Excluir" htmlOnclick="return confirm('Tem certeza que deseja excluir este produto?');"}<img src="{$rootUrl}imgs/manager/ico_delete.png" alt="Excluir"/>{/linkTo}
 </td>
 </tr>
 </form>
 {/foreach}
 </table>
	{/if}
</div>
<script>

{literal}

jQuery(document).ready(function(){

	jQuery(".form").bind('submit', function(){
 var button = jQuery('button',this).attr('disabled',true);
 var params = jQuery(this.elements).serialize();
// alert (params);
//alert(button);
 var loading = jQuery(".form").parent("td").find(".loading");

 jQuery.ajax({
 type: 'POST',
 url: '{/literal}{$rootUrl}{literal}manager/product/tableEdition',
 data: params,
 beforeSend: function(){
 loading.show();
 loading.html('<img src="{/literal}{$rootUrl}{literal}imgs/manager/ajax-loader.gif" alt="Carregando..."/>');
 },
 success: function(){
 loading.html("<img src='{/literal}{$rootUrl}{literal}imgs/manager/ico_ok.gif' alt='Ok'/>");
 },
 error: function(){
 loading.html("Erro");
 }
 })
 return false;
 });

});

{/literal} </script>