title: JQuery to change price based on selected options
body: <p>Struggling with the script that would grab a price and add to it if an option is selected. The code I'm using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var basePrice = +($('#price').html());;
  
  $(".readers").change(function() {
    newPrice = basePrice;
    $(".readers option:selected").each(function() {
      newPrice += $(this).data('#price')
    });
    $("#price").html(newPrice.toFixed(2));
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="product-price" itemprop="price" id="price"&gt;$299.00&lt;/span&gt;
  &lt;label&gt;Magnification&lt;/label&gt;
  &lt;select class="product-variants readers" id="readers" name="readers"&gt;
             &lt;option data-price="0" value="0"&gt;None&lt;/option&gt;
      &lt;option data-price="40" value="+1.50"&gt;+1.50&lt;/option&gt;
       &lt;option data-price="40" value="+2.00"&gt;+2.00&lt;/option&gt;                   
      &lt;option data-price="40" value="+2.50"&gt;+2.50&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Sorry for any cross-posting: I've seen related threads, yet can't figure out what the problem in my case is.</p>
  
  <p>Any help is much appreciated!</p>
  
  <p>~N.</p>