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.
Short side note: 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.
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>