I am creating my first bigger .js project from scratch and I'm completely stuck on one part. I am really new to web-dev and .js is my first programming language that I am learning. I want to create a dynamic calculator that allows for additional inputs to be added on button click. All that functionality is working however I do not know how to save and add values of all created inputs and then display their results added together. My code only works for the first added input row, however even though each next input item has updated dynamic ID I do not know how to extract their values and use it in my function.I am assuming that arrays should play a big role in this, but it is just beyond my scope of understanding for now. I apologize if the code is a mess I am really into programming but this is only my first month. I would really appreciate all the help you can give.
function addItems() {
idIndex = idIndex + 1;
let newItem1 = document.createElement("div");
newItem1.innerHTML =
`<select id="select_euro${idIndex}" class="input_itemA input_item_new">
<option value="E6" class="option1">Euro 6</option>
<option value="E5" class="option2">Euro 5</option>
<option value="E4" class="option3">Euro 4</option>
<option value="E3" class="option4">Euro 3</option>
<option value="E2" class="option5">Euro 2</option>
<option value="E1" class="option6">Euro 1</option>
</select> ` +
`<input type="number" min="0" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null" name="number_of_trucks" placeholder="L. Ciężarówek" id="input_item_truck${idIndex}" class="input_itemA input_item_new">
` +
`<select id="input_item_dmc${idIndex}" class="input_itemA input_item_new">
<option value="A" class="optionA">7,5t do 12t</option>
<option value="B" class="optionB">12 do 18t</option>
<option value="C" class="optionC">> 18t z 3 osi</option>
<option value="D" class="optionD">> 18t z 4 lub więcej osi</option>
</select>` +
`<input type="number" min="0" oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null" name="number_of_km" placeholder="Przejechane km" id="input_item_km${idIndex}" class="input_itemA input_item_new">
` +
`<button type="button" id="remove_input${idIndex}" class="btn_new_negative" onclick = remover()>-</button>`;
newItem1.setAttribute("id", "input_item" + idIndex);
newItem1.setAttribute("class", "input_item_new");
inputs.appendChild(newItem1);
let truckNoNew = document.querySelector(`#input_item_truck` + `${idIndex}`);
let euroClassNew = document.querySelector(`#select_euro` + `${idIndex}`);
let dmcNew = document.querySelector(`#input_item_dmc` + `${idIndex}`);
let truckKmNew = document.querySelector(`#input_item_km` + `${idIndex}`);
let span = document.querySelector("#result");
function calcTruckNew() {
if ((euroClassNew.value === "E6") & (dmcNew.value === "A")) {
let moneyAmount = truckKmNew.value * 0.014 * 11;
let resultNew = parseInt(moneyAmount * parseInt(truckNoNew.value));
span.textContent = resultNew;
} else if ((euroClassNew.value === "E6") & (dmcNew.value === "B")) {
let moneyAmount = truckKmNew.value * 0.002 * 11;
let resultNew = parseInt(moneyAmount * parseInt(truckNoNew.value));
span.textContent = resultNew;
} else if ((euroClassNew.value === "E6") & (dmcNew.value === "C")) {
let moneyAmount = truckKmNew.value * 0.004 * 11;
let resultNew = parseInt(moneyAmount * parseInt(truckNoNew.value));
span.textContent = resultNew;
} else if ((euroClassNew.value === "E6") & (dmcNew.value === "D")) {
let moneyAmount = truckKmNew.value * 0.005 * 11;
let resultNew = parseInt(moneyAmount * parseInt(truckNoNew.value));
span.textContent = resultNew;
}
}
btnCalc.addEventListener("click", calcTruckNew);
}
bntAdd.addEventListener("click", addItems);
//removes added inputs
function remover() {
btnRem = document.getElementById("remove_input" + idIndex);
newItem = document.getElementById("input_item" + idIndex);
newItem.parentNode.removeChild(newItem);
idIndex--;
}