JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wizardSignin" data-step="1" active>
 <h1> Step 1 </h1>
 <input type="text">
</div>

<div id="wizardSignin" data-step="2">
 <h1> Step 2 </h1>
 <input type="checkbox">
</div>

<div id="wizardSignin" data-step="3">
 <h1> Step 3 </h1>
 <select>
   <option>Option 1</option>
 </select>
</div>

 <input type="button" id="nextButton" value="next">

CSS

#wizardSignin{
  
  border:solid 1px red;
  
}

JavaScript

$(document).ready(function(){
	$('div[data-step]').hide();
  $('div[data-step=1]').show();
  
  $('#nextButton').on('click',function(){
  		var idx  = $('#wizardSignin[active]').attr('data-step');
  		$('#wizardSignin[active]').removeAttr('active').hide();
      
      if(idx<3){
      	idx++;
      }else{
      	idx=1;
      }
      
      $('#wizardSignin[data-step="'+idx+'"]').attr('active','');
      $('#wizardSignin[data-step="'+idx+'"]').effect('slide');
          
      
  });
  
});