JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  input 1
  <input class="myInput">
</p>
<p style="display: none;">
  input 2
  <input class="myInput">
</p>
<p style="display: none;">
  input 3
  <input class="myInput">
</p>
<button id="myButton">Button</button>

JavaScript

const btn = document.querySelector('#myButton');
const inputs = document.querySelectorAll('.myInput');

function checkInput(input) {
  btn.disabled = input.value.trim().length === 0;
}

let currentInputIndex = 0;

checkInput(inputs[currentInputIndex]);

for (let input of inputs) {
  input.addEventListener('input', function (e) {
    checkInput(e.target);
  });
}

btn.addEventListener('click', function () {
  inputs[currentInputIndex].parentElement.style.display = 'none';
  currentInputIndex++;  
  inputs[currentInputIndex].parentElement.style.display = '';
  checkInput(inputs[currentInputIndex]);
});