Basic input system for a few form fields
Handling the Problem

To make this scalable you need to generate the HTML to fit however many items you want to include. To Render it this way you need a data structure to hold what you want to render. 

First Think of the data structure then what functions you need to render this data.

My Solution

I picked the following data structure.

[{
  title: String
  value: Number
}]


Here is the list of render functions I picked.


renderForm -> Render just the form
renderResults -> Render just the results
render -> Render the entire screen


And finally, we will need to capture the data changes from the form to update the data structure and then call renderResults so I created the onFormChange function.

Code



// Code goes here

const data = [{
  title: 'E',
  value: 0
}, {
  title: 'M',
  value: 0
}, {
  title: 'C',
  value: 0
}, {
  title: 'F',
  value: 0
}]

function onFormChange (value, i) {
  data[i].value = value;
  renderResults();
}

function renderForm () {
  const elForm = document.getElementById('form');
  let html = '';
  elForm.innerHTML = '';
  data.forEach((d, i) =&gt; {
    html += `
      How many ${d.title}'s 
      &lt;input type='text' value=${d.value} onchange="onFormChange( this.value, ${i})"&gt;
      &lt;br&gt;
    `;
  })
  elForm.innerHTML = html;
}
function  renderResults () {
  const elResults = document.getElementById('results');
  let html = '';
  elResults.innerHTML = '';
  // Render Each Element
  data.forEach((d, i) =&gt; {
    html += `
      ${d.title}: ${d.value}&lt;br&gt;
    `;
  })
  // Render Total
  let sum = 0;
  data.forEach((d) =&gt; {
   sum += Number(d.value) || 0
  })
  html += `
    &lt;div&gt;Total is ${sum}&lt;/div&gt;
  `
  elResults.innerHTML = html;
}

function render () {
  renderForm()
  renderResults()
}

window.onload = render;
  
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;form id="form"&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &lt;div id="results"&gt;
    &lt;/div&gt;
  &lt;/body&gt;

&lt;/html&gt;




Final Thoughts

I did add a total div at the end of the results to show how you can also do some calculations on the entire data set when any of the values change.

Go ahead and add any additional data to the data array and have fun with it.