title: Add a class to a specific element and not to all that have the same class
body: <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>