var br = document.createElement("br"); function productCheck() { var form = document.createElement("form"); var price = document.createElement("input"); price.setAttribute("type", "number"); price.setAttribute("id", "number1"); price.setAttribute("placeholder", "Product Price"); price.onchange = handleChange; var qty = document.createElement("input"); qty.setAttribute("type", "number"); qty.setAttribute("id", "number2"); qty.setAttribute("placeholder", "quantity"); qty.onchange = handleChange; var discount = document.createElement("input"); discount.setAttribute("type", "number"); discount.setAttribute("id", "number3"); discount.setAttribute("placeholder", "discount"); discount.onchange = handleChange; var div = document.createElement("div"); div.setAttribute("id", "total"); form.appendChild(br.cloneNode()); div.onchange = handleChange; form.appendChild(price); // Inserting a line break form.appendChild(br.cloneNode()); ... form.appendChild(qty); ... form.appendChild(discount); ... form.appendChild(div); ... document.getElementsByTagName("body")[0] .appendChild(form); } function handleChange() { var p = document.getElementById("number1").value; var q = document.getElementById("number2").value; var d = document.getElementById("number3").value; var total = parseFloat(p) * parseInt(q); var discount_applied = parseFloat(total * d / 100); var eff_price = parseFloat(total) - parseFloat(discount_applied); if (!isNaN(eff_price)) return " "; if (p > 0 && q > 0){ var eff = document.querySelector("#total"); eff.innerHTML = eff_price.toFixed(2); } }

Creó un formulario con múltiples entradas. El problema radica en la salida. Solo obtengo 1 salida. Después de agregar varias entradas, solo obtengo resultados en la primera aparición. ¿Cómo lo resuelvo para cada ocurrencia? Quiero la solución solo usando JS y HTML. No se permite jquery en esto.