Add a class to a specific element and not to all that have the same class
<p>My problem must be very simple to solve for many of you but I have no idea how to specify the element, here's what's going on.</p>

<p>I have a list of products with their images and an <em>Add To Cart</em> button for each product. I want to add a class to the product's container when its specific Add To Cart button has been clicked.</p>

<p>So far I'm able to do it but all products' containers get the class added.</p>

<p>Here's my basic HTML:</p>

<pre><code>&lt;div class="prod-img"&gt;&lt;a href="#"&gt;&lt;img src="images/product-1.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="product-info"&gt;&lt;span class="price"&gt;$40.00&lt;/span&gt;
  &lt;p class="description"&gt;Lorem ipsum dolor...&lt;/p&gt;
  &lt;a href="#" class="add"&gt;&lt;img src="images/button-add-to-cart.png" alt="Add to Cart"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div class="prod-img"&gt;&lt;a href="#"&gt;&lt;img src="images/product-2.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="product-info"&gt;&lt;span class="price"&gt;$40.00&lt;/span&gt;
  &lt;p class="description"&gt;Lorem ipsum dolor...&lt;/p&gt;
  &lt;a href="#" class="add"&gt;&lt;img src="images/button-add-to-cart.png" alt="Add to Cart"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div class="prod-img"&gt;&lt;a href="#"&gt;&lt;img src="images/product-3.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="product-info"&gt;&lt;span class="price"&gt;$40.00&lt;/span&gt;
  &lt;p class="description"&gt;Lorem ipsum dolor...&lt;/p&gt;
  &lt;a href="#" class="add"&gt;&lt;img src="images/button-add-to-cart.png" alt="Add to Cart"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>My jQuery:</p>

<pre><code>$('.add').click(function(){
  $(this).replaceWith('&lt;img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added"&gt;');
  $('.prod-img').addClass('prod-added');
return false;
});
</code></pre>

<p>Just FYI, once the Add To Cart button is clicked it gets replaced with an "Item Added to Cart" image.</p>

<p>How can I make the specific product's container get a class ('prod-added') to it without adding it to the rest of the products?</p>

<p>Thanks for any help on this.</p>

<p>--</p>

<p><strong>EDIT</strong></p>

<p>I apologize, I did not expect the solution to be based on actually selecting exactly the previous element. I do have two more elements in between the product and the Add to Cart button. Code has been updated. Thanks for your help.</p>
