title: Loop through jQuery arrays / Output values to a div
body: <p>I have a button that dynamically creates 2 inputs per click</p>
  
  <p><strong>Data of Input 1:</strong> string 
  <strong>Data of Input 2:</strong> number (float) (0-100)</p>
  
  <p>I am creating an array of each like this.</p>
  
  <pre><code>var recipe_flavour_name = $("input[name='flav-name']").map(function()  {return $(this).val();}).get();
  var recipe_flavour_percent = $("input[name='flav-percent']").map(function(){return $(this).val();}).get();
  </code></pre>
  
  <p>As far as I can tell, the arrays are comma separated values.</p>
  
  <p>Let's for simplicity's sake say:</p>
  
  <pre><code>recipe_flavour_name = a,b,c
  recipe_flavour_percent = 5,6,7
  </code></pre>
  
  <p>I then want to take the <code>number value</code> to use in a function and then loop through all the values and use jQuery's <code>.html()</code> to add the values to a <code>div</code>.</p>
  
  <p>I have tried this: <code>flavPercent1</code> is just <code>recipe_flavour_percent</code></p>
  
  <pre><code>var arrayLength = flavPercent1.Length;
  
  for (var i = 0; i &lt; arrayLength; i++) {
      var flavML = (flavPercent1[0] / 100 * 100 * 1000) / 1000;
      var flavGrams = (flavML * .98 * 100) / 100;
      var flavPercent = (flavML / 100 * 1E4) / 100;
      $('.live-flavours').html('&lt;tr&gt;'+flavName[0]+'&lt;td&gt;&lt;/td&gt;'+parseFloat(flavML).toFixed(2)+'&lt;td&gt;'+parseFloat(flavGrams).toFixed(2)+'&lt;/td&gt;&lt;td&gt;'+parseFloat(flavPercent1[0]).toFixed(2)+'&lt;/td&gt;&lt;/tr&gt;');
  };
  </code></pre>
  
  <p>But I only get flavGrams and flavPercent returned, dynamically adding more data to the array does nothing.</p>
  
  <p><strong>What do I want to achieve?</strong></p>
  
  <ul>
  <li>Grab the values of specified inputs in an array. </li>
  <li>Pass them to a function. </li>
  <li>Loop through the values and output them in HTML using jQuery.</li>
  </ul>
  
  <p>I hope that makes sense and thanks in advance.</p>