JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<input id="input1" />
<br />
<input id="input2" />
<br />
<input id="input3" />
<br />
<input id="input4" />
<br />

JavaScript

document.getElementById('input2').disabled = true;
document.getElementById('input3').disabled = true;
document.getElementById('input4').disabled = true;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    inputs[index].addEventListener('input', function () {
        // Input 1
        if (this == document.getElementById('input1')) {
            if (this.value.length) {
                document.getElementById('input2').disabled = false;
            } else {
                document.getElementById('input2').disabled = true;
                document.getElementById('input3').disabled = true;
                document.getElementById('input4').disabled = true;
            }
        }

        // Input 2
        if (this == document.getElementById('input2')) {
            if (this.value.length) {
                document.getElementById('input3').disabled = false;
            } else {
                document.getElementById('input3').disabled = true;
                document.getElementById('input4').disabled = true;
            }
        }

        // Input 3
        if (this == document.getElementById('input3')) {
            if (this.value.length) {
                document.getElementById('input4').disabled = false;
            } else {
                document.getElementById('input4').disabled = true;
            }
        }
    });
}