title: How do I dynamically update total price with jquery?
body: <p>I have this <a href="http://jsfiddle.net/liamtarpey/qMZCq/" rel="nofollow">jsFiddle</a> which is working quite nicely, I'm trying to calculate total price of a product using jQuery and select boxes.</p>
  
  <p>I have one issue however, when the second select option of 'black widow' is selected, the data-value is updated depending on what is selected in the first select box.</p>
  
  <p>data-value is 100 (when 1x12 cabinet is selected)<br>
  data-value is 200 (when 2x12 cabinet is selected)<br>
  data-value is 400 (when 4x12 cabinet is selected) </p>
  
  <p>This is all updating correctly (I have checked in Chrome Inspect and the data-value is updating), however, once the black widow option has been selected once, the total price refuses to dynamically update.</p>
  
  <p>Can anyone please clarify why this is? Is there a way to re-load the updateTotal variable everytime a option is changed? I assumed this is what it was doing but clearly not.</p>
  
  <p>Here is my js:</p>
  
  <pre><code>//Calculate Total Price
      $("select[name='options']").change(function() { 
          updateTotal(); 
      });
  
  //Function for price calculator
  function updateTotal() {
      var newTotal = 0;
      $("select[name='options'] option:selected").each(function() {
          newTotal += parseFloat($(this).data('value'));
      });
      $(".total").text(newTotal);
  }
  </code></pre>
  
  <p>thanks!</p>