title: jQuery sum up the text values from the spans
body: <p>I need somehow to sum up the text values from the span, but I only can extract them and not to sum up. Is there a way to do this correctly? I got blocked about the code, I'm new to jQuery.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/0L4s6g8p/1/" rel="nofollow">http://jsfiddle.net/0L4s6g8p/1/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="prices"&gt; 
  
      &lt;h3&gt;Option 1 = $&lt;span class="sum" id="option-1"&gt;11.11&lt;/span&gt;&lt;/h3&gt;
      &lt;h3&gt;Option 2 = $&lt;span class="sum" id="option-2"&gt;22.22&lt;/span&gt;&lt;/h3&gt;
      &lt;h3&gt;Option 3 = $&lt;span class="sum" id="option-3"&gt;33.33&lt;/span&gt;&lt;/h3&gt;
  
  &lt;/div&gt;
  
  &lt;h3&gt;Subtotal = $&lt;span id="subtotal"&gt;0.00&lt;/span&gt;&lt;/h3&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>$('.prices').each(function(){
        var sum = $('.sum').text();
        $(this).each(function(){
          sum += parseInt($('.sum').text());
        });
        $("#subtotal").text(sum);
      });
  </code></pre>