title: Display Total Sum of a Dynamic Input
body: <p>I am trying to calculate the sum of a dynamic div for different categories, and then place that value in a div. What I don't understand, is how to figure out the total based on different categories. Here is a screencast of what I am talking about <a href="https://www.screencast.com/t/js8LBNfXo9sa" rel="nofollow noreferrer">https://www.screencast.com/t/js8LBNfXo9sa</a>. Here is also a link to my code pen which houses my code <a href="https://codepen.io/nfinsand/project/full/ZLNEon/" rel="nofollow noreferrer">https://codepen.io/nfinsand/project/full/ZLNEon/</a>.</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>var addListItem = document.getElementById("add-more");
  
  addListItem.addEventListener("click", function() {
    createNewItem();
  });
  
  //Display Month and Day
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1;
  
  today = mm + "/" + dd;
  document.getElementById("current-date").innerHTML = today;
  
  //Creates new elements
  function createNewItem() {
    var u = document.getElementById("full-item-list");
    var l = document.createElement("li");
    var elinput = document.createElement('input');
    var expenseName = document.createElement('input');
    var icon = document.createElement('img');
    var optionsArray = [{
        'itemText': 'Category',
        'itemDisabled': true,
        'itemSelected': true
      },
      'Auto &amp; Transport',
      'Health &amp; Fitness',
      'Home',
      'Personal Care',
      'Pets',
      'Shopping',
      'Entertainment',
      'Investments'
    ];
  
    var selectElem = document.createElement('select');
    selectElem.setAttribute('name', 'selectThis');
    // iterate through the array of options
    optionsArray.forEach(function(item) {
      var text = (typeof(item) === 'string') ? item : item.itemText;
      var option = document.createElement('option');
      var optionText = document.createTextNode(text);
      option.appendChild(optionText);
      if (typeof(item) === 'object') {
        // handle custom attributes
        Object.keys(item).forEach(function(key) {
          switch (key) {
            case 'itemDisabled':
              if (item[key]) {
                option.setAttribute('disabled', true);
              }
              break;
            case 'itemSelected':
              if (item[key]) {
                option.setAttribute('selected', true);
              }
              break;
            default:
              break;
          }
        });
      }
      selectElem.appendChild(option);
    });
  
    expenseName.setAttribute('type', 'text');
    expenseName.setAttribute('placeholder', 'Expense name');
    expenseName.setAttribute('class', 'expense-input-name')
    expenseName.setAttribute('name', 'totalExpense');
  
    elinput.setAttribute('type', 'number');
    elinput.setAttribute('class', 'li-input');
    elinput.setAttribute('placeholder', 'Enter amount');
    elinput.setAttribute('name', 'qty');
  
    l.setAttribute('class', 'list-item');
    l.setAttribute('name', 'li-name');
    icon.setAttribute('class', 'remove-icon');
    icon.setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/375261/System_Delete.ico');
    icon.setAttribute("id", "icon-id");
    icon.addEventListener('click', function(e) {
      thaticon(e);
    }, false);
    l.appendChild(selectElem);
    l.appendChild(expenseName);
    l.appendChild(elinput);
    l.appendChild(icon);
    u.appendChild(l);
  }
  
  //Deletes elements
  function thaticon(e) {
    console.log("test");
    var el = e.target;
    var elListItem = el.parentNode;
    elFullList = elListItem.parentNode;
    elFullList.removeChild(elListItem);
  }
  
  //Calculates and displays results
  function displayResult() {
    var arr = document.getElementsByName("qty");
    var wage = document.getElementById("inputWage").value;
    var jumboDiv = document.getElementById("jumbo-results").style.display = "block";
    var tot = 0;
    for (var i = 0; i &lt; arr.length; i++) {
      if (parseFloat(arr[i].value)) tot += parseFloat(arr[i].value);
    }
    document.getElementById("result").innerHTML = "Total Expenses: $" + tot.toFixed(2);
    document.getElementById("left").innerHTML = "Left Over: $" + ((wage - tot).toFixed(2));
  }
  
  //Resets and clears entire entry
  function resetForm() {
    var jumboDiv = document.getElementById("jumbo-results").style.display = "none";
    document.getElementById("full-item-list").innerHTML = "";
    document.getElementById("inputWage").value = "";
    document.getElementById("result").innerHTML = "";
    document.getElementById("left").innerHTML = "";
    document.getElementById("number-display").innerHTML = "";
  }
  
  //Displays the selected categories by user with the total sum for each one
  function displayCategory() {
  
  }
  //Capture screen shots
  /*function captureScreen() {
    html2canvas(document.querySelector("#capture")).then(canvas =&gt; {
        document.body.appendChild(canvas)
    });
  }*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Expense Tracker&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="capture" class="container-fluid"&gt;
      &lt;div class="centerDiv"&gt;
        &lt;p class="mainHeading"&gt;Expense Calculator&lt;/p&gt;
        &lt;p id="current-date"&gt;&lt;/p&gt;
        &lt;div class="jumbotron jumbo2"&gt;
          &lt;h4&gt;Categories&lt;/h4&gt;
          &lt;div id="category-display"&gt;&lt;br&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-1"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Auto &amp; Transport&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-2"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Health &amp; Fitness&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-3"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Home&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-4"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Personal Care&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-5"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Pets&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-6"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Shopping&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-7"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Entertainment&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="flex-container"&gt;
              &lt;div id="color-8"&gt;&lt;/div&gt;
              &lt;div class="categoryItem"&gt;Investments&lt;/div&gt;
              &lt;div class="well"&gt;$0.00&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="jumbotron"&gt;
          &lt;label class="expenseLabel"&gt;Income:&lt;/label&gt;&lt;br&gt;
          &lt;input id="inputWage" type="number" placeholder="Paycheck Amount"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;label&gt;Expenses:&lt;/label&gt;
          &lt;ul id="full-item-list"&gt;&lt;/ul&gt;
          &lt;div class="listItem"&gt;
            &lt;button id="add-more" class='btn btn-warning addExpenseBtn'&gt;Add Expense&lt;/button&gt;
            &lt;button class="btn btn-warning submitExpenseBtn" type="button" onclick="displayResult(); displayCategory()"&gt;Submit&lt;/button&gt;
            &lt;button class="btn btn-warning resetExpenseBtn" type="button" onclick="resetForm()"&gt;Reset&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="jumbo-results" class="jumbotron"&gt;
          &lt;p id="result"&gt;&lt;/p&gt;&lt;br&gt;
          &lt;p id="left"&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;button class="btn btn-warning captureBtn" onclick="captureScreen()"&gt;Save Me&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      &lt;small&gt;&amp;copy; Copyright 2018, Noble Finsand&lt;/small&gt;
    &lt;/footer&gt;
    &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'&gt;&lt;/script&gt;
    &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js'&gt;&lt;/script&gt;
    &lt;script src="js/index.js"&gt;&lt;/script&gt;
    &lt;script src="js/html2canvas.js"&gt;&lt;/script&gt;
    &lt;script src="js/html2canvas.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>