title: Create total calculation of multiple span elements
body: <p>I am trying to create a calculator that takes the value of an input field (quantity) that is then used in a formula and output into a span element (cubics). This is all working. Please see my jsfiddle.</p>
  
  <p>Example code</p>
  
  <pre><code>&lt;input id="07flute" type="text" value="0" /&gt;
  &lt;span id="cubics"&gt;&lt;/span&gt;
  
  $("#07flute").keyup(function () {
      var val = parseFloat($(this).val());
      val = (val ? val / 50 * 0.0113 : "Invalid number");
      $("#cubics").text(val);
  });
  </code></pre>
  
  <p>I would now like to add calculations that total the Quantity and Cubics within that table, though i'm not sure how to calculate these from span elements. Any help appreciated. Thanks.</p>
  
  <p>updated <a href="http://jsfiddle.net/weedy/vcD9A/" rel="nofollow">http://jsfiddle.net/weedy/vcD9A/</a></p>
  
  <p>Edited answer</p>
  
  <pre><code>function total() {
  var total = 0;
  $('span.cubics').each(function() {
      var n = parseFloat($(this).text());
      total += isNaN(n) ? 0 : n;
  });
  $('.totalcubics').text(total.toFixed(2));
  }
  
  $('input.qty').keyup(function() {
  var val = parseFloat($(this).val());
  val = (val ? val / 50 * $(this).data('cubics') : '');
  $(this).closest('td').next().find('span.cubics').text(val);
  total();
  });
  
  var $form = $('#my-form'),
  $summands = $form.find('input'),
  $sumDisplay = $('span#totalquantity');
  
  $form.keyup(function()
  {
  var sum = 0;
  $summands.each(function ()
  {
      var value = Number($(this).val());
      if (!isNaN(value)) sum += value;
  });
  
  $sumDisplay.text(sum);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/weedy/zn9kv/" rel="nofollow">http://jsfiddle.net/weedy/zn9kv/</a></p>