Dynamically add/remove fields on input The following code allows users to enter multiple optional quantity fields after first filling in a value of the current quantity input. If the input field contains a value it will then display the next quantity field, if not, it will remove/not display it.

The code is currently working as intended but I don't believe that it follows the DRY principle very well. Is there a way to make this more succinct? 



function quantityCheck() {
    var q1 = document.getElementById("Quantity1Value").value;
    if (q1 !== "") {
        document.getElementById("Quantity2").style.display = "";
    } else {
        document.getElementById("Quantity2").style.display = "none";
    }

    var q2 = document.getElementById("Quantity2Value").value;
    if (q2 !== "") {
        document.getElementById("Quantity3").style.display = "";
    } else {
        document.getElementById("Quantity3").style.display = "none";
    }

    var q3 = document.getElementById("Quantity3Value").value;
    if (q3 !== "") {
        document.getElementById("Quantity4").style.display = "";
    } else {
        document.getElementById("Quantity4").style.display = "none";
    }
}
&lt;div&gt;
    &lt;span&gt;Quantity 1&lt;/span&gt;
    &lt;input type="number" id="Quantity1Value" oninput="quantityCheck()" required&gt;
&lt;/div&gt;

&lt;div id="Quantity2" style="display:none"&gt;
    &lt;span&gt;Quantity 2&lt;/span&gt;
    &lt;input type="number" id="Quantity2Value" oninput="quantityCheck()"&gt;
&lt;/div&gt;

&lt;div id="Quantity3" style="display:none"&gt;
    &lt;span&gt;Quantity 3&lt;/span&gt;
    &lt;input type="number" id="Quantity3Value" oninput="quantityCheck()"&gt;
&lt;/div&gt;

&lt;div id="Quantity4" style="display:none"&gt;
    &lt;span&gt;Quantity 4&lt;/span&gt;
    &lt;input type="number" id="Quantity4Value"&gt;
&lt;/div&gt;
It would be better to do your evaluation only for the particular elements that could be affected each time rather than to reevaluate all of them on any change in any input. 

We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:



function quantityCheck(eventElement, quantity) {
 //try to use const or let instead of var. 
 //by passing 'this', we now have the target element that triggered the event,
 //so we only need to grab the one we want to change.
 const quantToChange = document.getElementById(quantity);

 //we can also use a tertiary function to make our change to shorten things a bit.
 quantToChange.style.display = eventElement.value.length ? '' : 'none';
}
 &lt;div&gt;
    &lt;span&gt;Quantity 1&lt;/span&gt;
    &lt;input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required&gt;
&lt;/div&gt;

&lt;div id="Quantity2" style="display:none"&gt;
    &lt;span&gt;Quantity 2&lt;/span&gt;
    &lt;input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')"&gt;
&lt;/div&gt;

&lt;div id="Quantity3" style="display:none"&gt;
    &lt;span&gt;Quantity 3&lt;/span&gt;
    &lt;input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')"&gt;
&lt;/div&gt;

&lt;div id="Quantity4" style="display:none"&gt;
    &lt;span&gt;Quantity 4&lt;/span&gt;
    &lt;input type="number" id="Quantity4Value"&gt;
&lt;/div&gt;