wordpress - jQuery Showing NaN value -

i have code below working fine why jquery returning $nan when run via wordpress theme using format below:

jquery:

jquery(document).ready(function($) {            var $span = $('.amount'),         originalprice = +$span.text().substr(1);      $('.addon-select').change(function () {         var price = +$(this).find('option:selected').data('price');         $span.text('$' + (price + originalprice));     });       }); 

sample html:

<select class="addon addon-select" name="addon-artwork">                  <option value="">select option...</option>                  <option data-price="30.00" value="graphic-design-1" >graphic design (<span class="amount">&#36;30</span>)</option>                 <option data-price="0.00" value="artwork-provided-2" >artwork provided</option>  </select> <span class="amount">$39</span> 

demo

nan there because when 1st option selected data-price not defined.

check if value of selected item not null if (this.value !== '') {..} add price span.

and in else part i.e when selected item value '' use $span.text('$' + originalprice);

jquery(document).ready(function ($) {      var $span = $('.amount');     var originalprice = +$span.text().substr(1);     $('.addon-select').change(function () {         if (this.value !== '') {             var price = +$(this).find('option:selected').data('price');             $span.text('$' + (price + originalprice));         }else{              $span.text('$' + originalprice);         }      }); });