title: Javascript: dynamic calculation input value
body: <p>I have a simple jquery calculator:</p>
  
  <pre><code>   &lt;p class="price" data-base-price="50"&gt;$&lt;span&gt;80&lt;/span&gt;&lt;/p&gt;
  
      &lt;select name="s1" class="price-option"&gt;
          &lt;option value="1" data-price="10"&gt;Item 1&lt;/option&gt;
          &lt;option value="2" data-price="20"&gt;Item 2&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select name="s2" class="price-option"&gt;
          &lt;option value="1" data-price="30"&gt;Item 3&lt;/option&gt;
          &lt;option value="2" data-price="40"&gt;Item 4&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="text" name="price-option-input" id="price-option-input"&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function () {
    $('.price-option').change(function(){
      var price = parseInt($('.price').data('base-price'));
  
      $('.price-option').each(function(i, el) {
        price += parseInt($('option:selected', el).data('price'));
      });
      price += parseInt($('#price-option-input').val());
  
      $('.price span').text(price);
    }); 
  });
  </code></pre>
  
  <p>This calculator is working, but the problem is when I enter value for text input the result in <code>price</code> is not updating dynamically (I need to choose another option in selector for result updating)</p>