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);
       }
    }

Created a form with multiple inputs. The issue lies in the output. I am only getting 1 output. After adding multiple inputs, I am getting only output in the first occurence. How do I resolve it for each occurence? I want the solution only using JS and HTML. No jquery is allowed in this.