JSFiddle - React, Tailwind, and code Playground
HTML
<div class="group">
<input type="text">
<input type="text" disabled>
<input type="text" disabled>
<input type="text" disabled>
<input type="text" disabled>
</div>
JavaScript
document.querySelectorAll('.group input').forEach((input) => {
input.addEventListener('input', ({target}) => {
if (target.value.length >= 3) {
target.nextElementSibling.disabled = false
target.nextElementSibling.focus()
} else {
target.nextElementSibling.disabled = true
}
})
})