title: How to sum dynamic value produced by jquery?
body: <p>Hi guys i am totally new here actually i am about to fix the problem and was able to get (almost) the solution from here</p>
  
  <p><a href="https://stackoverflow.com/questions/36659119/how-to-sum-jquery-outputs">How to sum Jquery Outputs</a></p>
  
  <p>i got all the idea the problem is i cant output the total sad that i am really noob when it comes to jquery</p>
  
  <p>What i want to do is sum up all so i can have the total bill here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
   $('input:radio[name="meal"]').change(function(ev){
          
    if ($(this).val() == 'Burger with fries') {     
     var meal = 20;
    }
          else {            
     var meal = 30;
          } 
    
          $('#meal').html((meal).toFixed(2));
  
      }); 
  
   $('input:radio[name="drinks"]').change(function(ev){
   
    if ($(this).val() == 'Ice Tea') {
              var drinks = 1;
          }
          else if ($(this).val() == 'Coke') {
              var drinks = 1.20;
          }
          else if ($(this).val() == 'Lemonade') {
              var drinks = 2;
          }
          else if ($(this).val() == 'Water') {
              var drinks = 1.75;
          }
          else if ($(this).val() == 'Hot choco') {
              var drinks = 3;
          }
          else if ($(this).val() == 'Hot coffee') {
              var drinks = 1.25;
          }
          else {
               var drinks = 0;
          }
    
    $('#drinks').html((drinks).toFixed(2));
   }); 
  
  
   $('input:radio[name="extras"]').change(function(ev){
    
    if ($(this).val() == 'Rice') {
              var extras = 10;
          }
    else if ($(this).val() == 'Gravy') {
              var extras = 5;
          }
          else {
               var extras = 0;
          }
    $('#extras').html((extras).toFixed(2));
   });
   
    $('textarea[name="spoon"]').keyup(function(ev){
       
   var spoon = $(this).val().replace(/\n/g, '&lt;br/&gt;');
   var spoon = spoon*2;
   $("#spoon").html(spoon); 
      
   });
  
  $('input:text[name="fork"]').keyup(function(ev){
       
   var fork = $(this).val().replace(/\n/g, '&lt;br/&gt;');
   var fork = fork*1.25;
   $("#fork").html(fork);        
   });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h1&gt;Calculator base on radio buttons&lt;/h1&gt;
  &lt;h2&gt;Question 1: Meal&lt;/h2&gt;
  &lt;div&gt;
  &lt;label class="radio"&gt;&lt;input name="meal" value="Burger with fries" type="radio"/&gt;Burger with fries&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label class="radio"&gt;&lt;input name="meal" value="Chicken with rice" type="radio" /&gt;Chicken with rice&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Question 2: Drinks&lt;/h2&gt;
  &lt;div&gt;
  &lt;input type="radio" name="drinks" value="Ice Tea" /&gt; Ice Tea
  &lt;input type="radio" name="drinks" value="Coke" /&gt; Coke
  &lt;input type="radio" name="drinks" value="Lemonade" /&gt; Lemonade
  &lt;input type="radio" name="drinks" value="Water" /&gt; Water
  &lt;input type="radio" name="drinks" value="Hot choco" /&gt; Hot choco
  &lt;input type="radio" name="drinks" value="Hot coffee" /&gt; Hot coffee
  &lt;input type="radio" name="drinks" value="No drinks" /&gt; No drinks
  &lt;/div&gt;
  
  &lt;h2&gt;Question 3: Extras&lt;/h2&gt;
  &lt;div&gt;
  &lt;input type="radio" name="extras" value="Rice" /&gt; Rice
  &lt;input type="radio" name="extras" value="Gravy" /&gt; Gravy
  &lt;input type="radio" name="extras" value="No Extra" /&gt; No Extra
  &lt;/div&gt;
  
  &lt;h2&gt;Question 4: How many extra spoon?&lt;/h2&gt;
  &lt;div&gt;
  &lt;textarea name="spoon" rows="3"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Question 5: How many extra fork?&lt;/h2&gt;
  &lt;div&gt;
  &lt;input name="fork" type="text" value="" placeholder=""/&gt;
  &lt;/div&gt;
  
  &lt;hr /&gt;
  &lt;div&gt;
  &lt;b&gt;Meal:&lt;/b&gt; &lt;span id="meal"&gt;&lt;/span&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;b&gt;Drinks:&lt;/b&gt; &lt;span id="drinks"&gt;&lt;/span&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;b&gt;Extras:&lt;/b&gt; &lt;span id="extras"&gt;&lt;/span&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;b&gt;Spoon:&lt;/b&gt; &lt;span id="spoon"&gt;&lt;/span&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;b&gt;Fork:&lt;/b&gt; &lt;span id="fork"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;h3&gt;
   &lt;b&gt;Total:&lt;/b&gt;&lt;span id="total"&gt;&lt;/span&gt;
   &lt;/h3&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>