Dynamically add/remove fields on input

Question

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

<div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck()" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck()">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck()">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

Answer 1

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

 <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

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

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

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

Answer 2

Put styles in stylesheet, and use semantic markup. It's easier to think about the problem if it is a list of input controls.

You would most probably want to reset the hidden inputs, because in case a previous input value is removed, and then the form is submitted, those hidden input values would still get included.

Adding a listener on a form propagates it to contained controls so that the event target is the control being manipulated. So in the example below, in case of other controls, the listener would need to check if the target is something that it needs to act upon or not.

In the example below, I have changed the behavior so that on input, the next input label's hidden CSS class is removed, and on removing content from input, all succeeding input labels get that class added, and also resetting their value.

document.addEventListener('DOMContentLoaded', () => {
  const form = document.forms[0] // NOTE: change if multiple forms
  const inputs = Array.from(form.elements)
  // ^NOTE: use a selector or filter if other controls

  const hideAndReset = input => {
    input.parentElement.classList.add('hidden')
    input.value = ''
  }

  const showNext = ({target}) => {
    const nextIndex = inputs.indexOf(target) + 1

    if(nextIndex == inputs.length)
      return false

    if(target.value)
      inputs[nextIndex].parentElement.classList.remove('hidden')
    else
      inputs.slice(nextIndex).forEach(hideAndReset)
  }

  form.addEventListener('input', showNext)
})

label { display: block }
.hidden { display: none }

<form>
  <label>
    <span>Quantity 1</span>
    <input id="qty1" type="number" required>
  </label>

  <label class="hidden">
    <span>Quantity 2</span>
    <input id="qty2" type="number">
  </label>

  <label class="hidden">
    <span>Quantity 3</span>
    <input id="qty3" type="number">
  </label>

  <label class="hidden">
    <span>Quantity 4</span>
    <input id="qty4" type="number">
  </label>
</form>