title: Dynamic JQuery function to change HTML in various DIVs
body: <p>I am building a small application for my company (I'm not a pro in development, just doing it because I'm the only person they have who is technically inclined). The nuts and bolts are these: We have one product page with items pulled from database via PHP/MYSQL. Right now there are only some 15 products but that could go way up.</p>
  
  <p>For each product displayed on the page I am using CSS div classes as opposed to IDs. The product thumbnail image is generated dynamically, but I want a color picker to appear for each item shown on the product list page, and keep in mind that not all color options for each item are the same. I want someone to be able to click on a color picker for a particular item shown on a screen with many other items, but change only the thumbnail for the item whose color picker was clicked (so that they can see the item they're interested in, but in the color they click on).</p>
  
  <p>What I have so far is this. Please help!!!</p>
  
  <pre><code>Product Page
  
  &lt;div class="flex-container"&gt;
  &lt;div class="thumbnail" data-id="1"&gt;
  &lt;a href="product.php?id=1"&gt;
  &lt;img src="images/coletti_thumb.jpg" alt="" height="180"&gt;&lt;/a&gt;
  &lt;h3&gt;Coletti&lt;/h3&gt;&lt;/div&gt;
  &lt;div data-id="2"&gt;&lt;a href="product.php?id=2"&gt;
  &lt;img src="images/R1GVA52BNW_thumb.jpg" alt="" height="180"&gt;&lt;/a&gt;
  &lt;h3&gt;Vail&lt;/h3&gt;
  &lt;div title="Brushed Nickel" data-id="button_2" class="colorSwatch" style="background-image: url('images/Brushed+Nickel_swatch.jpg')"&gt;&lt;/div&gt;
  &lt;div title="Driftwood" data-id="button_2" class="colorSwatch" style="background-image: url('images/Driftwood_swatch.jpg')"&gt;&lt;/div&gt;
  &lt;div title="Matte Black" data-id="button_2" class="colorSwatch" style="background-image: url('images/Matte+Black_swatch.jpg')"&gt;&lt;/div&gt;
  &lt;div title="Matte White" data-id="button_2" class="colorSwatch" style="background-image: url('images/Matte+White_swatch.jpg')"&gt;&lt;/div&gt;
  &lt;div title="Oil Rubbed Bronze" data-id="button_2" class="colorSwatch" style="background-image: url('images/Oil+Rubbed+Bronze_swatch.jpg')"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>For the JQUERY I have</p>
  
  <pre><code>$(document).ready(function(){
      $(".colorSwatch").on("click", function() {
      $(".thumbnail"+$(this).data('content-id')).replaceWith(various STuff)
  })
  </code></pre>
  
  <p>Clearly I'm confused as to how to control just one div with so many divs of the same name involved in the process. Any advice would be welcome!!!</p>