javascript create element in loop, one by one

Question

I can not find an answer to my problem, being beginner in javascript!

I want to create a new "INPUT" element at the click in a loop, limited to a maximum of 15 elements.

However with my code below, when I click on my button he created me 15 element "INPUT" at once!

I'm trying to create them one by one, up to 15

---

HTML

<input class="objetInputSuivant" type="text" id="objetCampement_1" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInputSuivant" type="number" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">

<div id="AddChampCampement"></div>

   <button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInput()">AJOUTER UN OBJET</button>

   <input class="totalInput" type="number" id="totalCampement" value="0" readonly>

---

JAVASCRIPT

function NewInput() {

    let i;
    for (i = 0; i < 15; i++) {

        let Objet = document.createElement("INPUT");
        let Poids = document.createElement("INPUT");

        Objet.type = "text";
        Objet.className = "objetInput";
        Objet.placeholder = "OBJET";
        Objet.onkeyup = function() {
            this.value = this.value.toUpperCase();
        }
        Objet.maxLength = 18;

        document.getElementById("AddChampCampement").appendChild(Objet);

        Poids.type = "number";
        Poids.className = "poidsInput";
        Poids.placeholder = "POIDS";
        Poids.id = "poidsCampement_" + i;
        Poids.onkeypress = function() {
            return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
        }
        Poids.onkeyup = function() {
            limit(this);
        }

        document.getElementById("AddChampCampement").appendChild(Poids);

    }
}

Answer 1

great for the limitation, so I took your two answers, and it works to keep the unique ID with the limitation.

here is the code:

const NewInput = (function() {
    let i = 0;

    return function NewInput() {
        i++;
        if(document.getElementById("AddChampCampement").childNodes.length<30){
        let Objet = document.createElement("INPUT");
        let Poids = document.createElement("INPUT");

        Objet.type = "text";
        Objet.className = "objetInput";
        Objet.placeholder = "OBJET";
        Objet.onkeyup = function() {
            this.value = this.value.toUpperCase();
        }
        Objet.maxLength = 18;

        document.getElementById("AddChampCampement").appendChild(Objet);

        Poids.type = "number";
        Poids.className = "poidsInput";
        Poids.placeholder = "POIDS";
        Poids.id = "poidsCampement_" + i;
        Poids.onkeypress = function() {
            return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
        }
        Poids.onkeyup = function() {
            limit(this);
        }

        document.getElementById("AddChampCampement").appendChild(Poids);

    }}

})()