title: Jquery Calculator keeps returning NaN
body: <p>Hi I have a Jquery Calculator but it keeps returning NaN</p>
  <p>Can anyone help please</p>
  <p>I did read some other stack over flow questions regarding similar issues and saw people were saying to put a parseInt into the jquery, which I have tried but still get NaN</p>
  <p>Please note, I also have conditional logic (which does work) but to save putting 100's lines of code which is unrelated to my question I shortened it all.</p>
  <p>The user would only be able to select one of the drop down options not both.</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>/* * * * * * * * * * * * * * * * * *
   * Calculator
   * * * * * * * * * * * * * * * * * */
  $(function() {
    $("select.cover_question10").on("change", calc);
    $("select.cover_question15").on("change", calc);
  
    function calc() {
      var basePrice = 0;
      newPrice = basePrice;
  
      $("select.cover_question10 option:selected, select.cover_question15").each(function() {
        newPrice += parseInt($(this).data('price'), 10);
      });
  
      var percentage = 0;
      $("input[type=checkbox].calculate:checked").each(function() {
        percentage += parseInt($(this).data('price'), 10);
      });
      newPrice = newPrice + (newPrice * percentage / 100);
      newPrice = newPrice.toFixed(2);
      $("#item-price").html(newPrice);
      $("#price").val(newPrice);
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;label&gt;How long do you want the cover 10?&lt;/label&gt;
  &lt;select class="select cover_question10" name="cover_question10" id="cover_question"&gt;
    &lt;option id="cover" value="Select"&gt;Select cover&lt;/option&gt;
    &lt;option id="cover_12" value="cover_12" data-price="90.76" data-capacity="12 Months Cover"&gt;12 Months Cover &lt;/option&gt;
    &lt;option id="cover_24" value="cover_24" data-price="124.50" data-capacity="24 Months Cover"&gt;24 Months Cover&lt;/option&gt;
    &lt;option id="cover_36" value="cover_36" data-price="135" data-capacity="36 Months Cover"&gt;36 Months Cover&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;br&gt;&lt;br&gt;
  &lt;label&gt;How long do you want the cover 15?&lt;/label&gt;
  &lt;select class="select cover_question15" name="cover_question15" id="cover_question"&gt;
    &lt;option id="cover" value="Select"&gt;Select cover&lt;/option&gt;
    &lt;option id="cover_12" value="cover_12" data-price="104.26" data-capacity="12 Months Cover"&gt;12 Months Cover &lt;/option&gt;
    &lt;option id="cover_24" value="cover_24" data-price="145.50" data-capacity="24 Months Cover"&gt;24 Months Cover&lt;/option&gt;
    &lt;option id="cover_36" value="cover_36" data-price="195" data-capacity="36 Months Cover"&gt;36 Months Cover&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;&lt;br&gt; £
  
  &lt;span id="item-price"&gt;0.00&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Also here is my Fiddle<br />
  <a href="https://jsfiddle.net/0ajo48ne/" rel="nofollow noreferrer">https://jsfiddle.net/0ajo48ne/</a></p>