Hi All I am trying to build a shopping website with ajax. When a user clicks the "add to cart" image. The little loading image will show next to the Add To Cart Image. The first click works fine and the image showed as I expected. However, the second and the following clicks appends more images on the first loading image(2nd:add two loading images, 3rd: add three images..6 total images after 3 clicks). I did use ajaxStop and remove the first image...Not sure what's going on...Could use a help. Thanks a lot.

My javascript code

// add to cart
$(".addToCart").click(function(e){
 $this=$(this);
 $tableId=$this.closest('table').attr('id');


$($this).prev().ajaxStart(function(){
   $("<img class='loader' src='images/loader.gif'>").insertBefore($this);
});


$($this).prev().ajaxStop(function(){
   $($this).prev().remove(); 
});

HTML

<table>
<tr>
   <td width="146" align="right" valign="middle">
<br>
<span id="wasPrice"><?php echo $productPriceWas; ?></span>
<br>

<?php echo "$".$productPrice;?><br>**//I want my image here**<a class="addToCart" href="javascript:void(0);"><img src="images/addToCart.gif" alt="add To Cart"/><a/>     </td>
        </tr>
         </table>