Select and Checkbox calculator keeps giving NaN unless both select's are ticked

I have a calculator which keeps giving NaN unless both select's (dropdowns) have an option selected.

Originally this was working fine with one select box and two check boxes as can be seen here https://codepen.io/Chazlie/pen/NZqdXg

I then tried to make it so it had two drop down's but I get a NaN unless both dropdowns have a selection - This can be seen here https://codepen.io/Chazlie/pen/ewNBPR

Note: I am not sure if this matters, but this is also based on conditional logic as can be seen here https://codepen.io/Chazlie/pen/JQdGWG

My Script:

$(function(){


  $("select.calculate").on("change", calc);
  $("input[type=checkbox].calculate").on("click", calc);
  $("select.thisone").on("change", calc);

  function calc() {
   var basePrice = 0;
    newPrice = basePrice;

    $("select.calculate option:selected,  select.thisone option:selected, input[type=checkbox].calculate:checked").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  }
});

This is my HTML

<label>How long do you want the cover?</label>
  <select  name="howlongcover" class="thisone" >
       <option>Pick one!</option>
      <option data-price="55" value="valuhowlongcover"  >24 Months a </option>
      <option value="valuhowlongcover" data-price="58" >36 Months</option>
 <option value="valuhowlongcover" data-price="71" >48 Months</option>
  <option  value="valuhowlongcover" data-price="119" >60 Months</option>

    </select>
 <label>How long do you want the cover 2?</label>
  <select class="calculate" name="howlongcover">


       <option>Pick one!</option>
      <option  value="valuhowlongcover" data-price="60" >24 Months b </option>
      <option value="valuhowlongcover"data-price="65" >36 Months</option>
 <option  value="valuhowlongcover" data-price="79" >48 Months</option>
  <option value="valuhowlongcover" data-price="139" >60 Months</option>

    </select>

<BR><BR>


 Please tick if any of the following apply<br>
  <label><input class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> It's classed as a 4x4</label><BR>
  <label><input class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> The engine is more than 2.5L</label><BR>
    <label><class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> It's a commercial use</label><BR>

      <BR>
     Price:  <span id="item-price">0</span>

When I added

$("select.thisone").on("change", calc);

and

$("select.calculate option:selected,  select.thisone option:selected, input[type=checkbox].calculate:checked").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

and

<select  name="howlongcover" class="thisone" >

This is when I started facing issues with NaN and having to have both dropdowns selected. (which in the form will never have both dropdowns selected because the conditional logic will never show both)

Please see this pen https://codepen.io/Chazlie/pen/ewNBPR