title: Loop through inputs and add them
body: <p>Trying to loop through all the inputs, when more are added, and add them all to the total (var = paidTotal). I'm getting NaN for the total and Cannot read property 'length' of undefined. Pretty sure the issue is in the peoplepaid() function.</p>
  
  <p>In the peoplePaid() onclick function I'm trying to loop through all the fieldInputs (class="person") depending on how many inputs are created and add the total to #paidTotal. Hopefully that's helpful.</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() {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '&lt;div&gt;&lt;input type="text" name="persons" class="persons"/&gt;&lt;/div&gt;';
    var x = 1;
  
    $(addButton).click(function() {
      if (x &lt; maxFields) {
        x++;
        $(wrapper).append(fieldInput);
      }
    });
  
    $(deleteButton).click(function(e) {
      e.preventDefault();
      var myNode = document.getElementById("userNumbers");
      i = myNode.childNodes.length - 1;
      if (i &gt;= 0) {
        myNode.removeChild(myNode.childNodes[i]);
        x--;
      }
  
    });
  
  });
  
  
  function peoplePaid() {
    var checkTotal = document.getElementById('check').value;
    var personsCheck = document.getElementsByClassName('persons').value;
    var inputs = document.getElementsByClassName('persons');
    var paidTotal = document.getElementById('paidTotal');
  
    for (var i = 1; i &lt; personsCheck.length; i += 1) {
      paidTotal[i] += personsCheck;
    }
    paidTotal.innerHTML = checkTotal - personsCheck;
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Check Total&lt;/h3&gt;
  $ &lt;input type="text" id="check" value="" /&gt;
  &lt;h3&gt;Number of People: &lt;span id="numberOfPeople"&gt;&lt;/span&gt;&lt;/h3&gt;
  
  &lt;button type="button" onclick="plusOne()" id="plusOne"&gt;+&lt;/button&gt;
  &lt;button type="button" onclick="minusOne()" id="minusOne"&gt;-&lt;/button&gt;
  
  
  &lt;div&gt;
    &lt;div id="userNumbers"&gt;
      &lt;input type="text" class="persons" name="person"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;button onclick="peoplePaid()"&gt;Calculate&lt;/button&gt;
  &lt;!--Paid Amount--&gt;
  &lt;div&gt;
    &lt;h3&gt;Paid Amount: &lt;span id="paidTotal"&gt;&lt;/span&gt;&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>