How to sum all values ​​of dynamically added inputs?

Question

JavaScript

Good evening guys, I'm trying to learn dynamic things in js (in the sense of clicking + the input field was added, it was deleted), but the question arose sharply, I just can't figure out how to add numbers from inputs.

Since I decided if they are added on click and removed, I can’t set a specific class for them and count them as static, if there were 5 of them, let’s say I would just call input1, 2, 3, etc., in the example that I brought the fields are not dynamic, but I think this is not so critical, imagine that we have added these fields.

I apologize, there are no active examples with a bunch of solutions, firstly, I have no idea how to do this at all, and secondly, I’m frankly ashamed of what I write in Js.

There is a small example with "code" in the sandbox.
https://codepen.io/FrelAderal/pen/mdMgdOV

Answer 1

const result = document.querySelector('.result');
const inputContainer = document.querySelector('.input-container');

inputContainer.addEventListener('input', () => {
  result.textContent = Array.from(
    inputContainer.querySelectorAll('.input_js'),
    input => Number(input.value)
  ).reduce((a, b) => a + b);
});