JSFiddle - React, Tailwind, and code Playground

by willystyle

HTML

<h2>
Press enter to add boxes.<br>
Boxes on the right will have unique ID.<br>
Write the number to the box on the right.<br>
<span style="color: red;">I want to get sum of values on the "number input" boxes.</span><br>
Thanks for in advance!
</h2>
<div>
Sum: <span id="result"></span>
</div>

JavaScript

document.addEventListener("keydown", addBox);
        let resultEl = document.querySelector('#result');
        
        function addBox(addBox) {            
            if (addBox.keyCode == 13) {
                let newText = document.createElement("input");
                newText.setAttribute("type", "text");
                document.body.appendChild(newText);
                let newInput = document.createElement("input");
                newInput.setAttribute("type", "number");
                newInput.setAttribute("class", "moneyHere");
                newInput.addEventListener('change', sumator);
                document.body.appendChild(newInput);
                let newLine = document.createElement("br");
                document.body.appendChild(newLine);
                let moneyList = document.getElementsByClassName("moneyHere");
                for (let i = 0; i < moneyList.length; i++) {
                    moneyList[i].id = "idList" + (i + 1);
                }
            }
        }
        
        function sumator(e) {
        	let numInputs = document.querySelectorAll('.moneyHere');
          let sum = 0;
          for (let numInput of numInputs) {
          	sum += Number(numInput.value);
          }
          resultEl.textContent = sum;
          
        }