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.
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>