title: Jquery separate Multiple Select Options update price on change
body: <p>I have few individual products with an original price and each with a select dropdown and associated prices too, the original price changes based on the option selected, this is done via JQuery.</p>
  
  <p>So Product 1 = 3.99, and optional addons (options from select) small = 1.50, Medium = 3.50 etc.</p>
  
  <pre><code>&lt;p&gt;&lt;span data-name="product_name"&gt;Addon Product&lt;/span&gt;&lt;/p&gt;
  &lt;p data-name="product_desc"&gt;Addon product descriptions&lt;/p&gt;
  &lt;label&gt;Size: &lt;/label&gt;
  &lt;select class="product-variants readers form-control input-sm" id="readers" name="product_size"&gt;
  &lt;option data-price="0" value="Small"&gt;Small&lt;/option&gt;
  &lt;option data-price="40" value="Medium"&gt;Medium&lt;/option&gt;
  &lt;option data-price="60" value="Large"&gt;Large&lt;/option&gt;
  &lt;/select&gt;
  &lt;span class="price pull-left" itemprop="price" id="price"&gt;&amp;pound;5.99&lt;/span&gt;
  &lt;hr/&gt;
  
  &lt;p&gt;&lt;span data-name="product_name"&gt;2nd Product&lt;/span&gt;&lt;/p&gt;
  &lt;p data-name="product_desc"&gt;2nd Addon product description&lt;/p&gt;
   &lt;label&gt;Size: &lt;/label&gt;
  &lt;select class="product-variants readers form-control input-sm" id="readers" name="product_size"&gt;
  &lt;option data-price="0" value="Small"&gt;Small&lt;/option&gt;
  &lt;option data-price="20" value="Medium"&gt;Medium&lt;/option&gt;
  &lt;option data-price="30" value="Large"&gt;Large&lt;/option&gt;
  &lt;/select&gt;
  &lt;span class="price pull-left" itemprop="price" id="price"&gt;&amp;pound;3.99&lt;/span&gt;
  &lt;hr/&gt;
  </code></pre>
  
  <p>There will also be Product 3, 4 and so on.</p>
  
  <p>The input field name, price, id, class is being populated dynamically from a database so they are same for different Items.</p>
  
  <p>If one product exists then it's fine however with multiple products and its options the price for the first ID only changes. As an example if I change the select from Product 2 then the price of Product 1 changes only. How can I get it to stick to its own Product and change the price for that one only?</p>
  
  <p>Here's my code and a <a href="https://jsfiddle.net/Lenfeovs/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>var basePrice = +($('#price').html()).replace(/[^0-9\.]+/g,"");
      $(".readers").change(function() {
        newPrice = basePrice;
        $(".readers option:selected").each(function() {
          newPrice += +$(this).attr('data-price')
        });
        $("#price").html("&amp;pound;" + newPrice.toFixed(2));
        $("#new-price").val(newPrice.toFixed(2));
      });
  </code></pre>