JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
 <!--<form id="fields">-->
    
    <div class="opt active">  <input type="text"  placeholder ="Enter Name"name="name"> <button>OK</button>
    </div>
    
    <div class="opt">  
      <input type="text"  placeholder ="Enter Age" name="age"> <button>OK</button>
    </div>
    
    <div class="opt">  
      <input type="text"  placeholder ="Enter Race" name="race"> <button>OK</button>
    </div>
    
    <div class="opt">  
      <input type="text"  placeholder ="Enter Sex" name="sex"> <button id="done">Done</button>
    </div>
  
  <!--</form>-->
  </div>

CSS

#container{
  background:#3399ff;
  padding:5px;
  display:inline-block;
  border-radius: 3px;
}

.opt{
  margin-bottom:5px;
  display:none;
}

.opt input {
  border-style:none;
  min-width:100px;
  height:20px;
}

.opt button{
  background:#47d18c;
  border-style:none;
  color:white;
  border-radius:3px;
  width:40px;
  height:25px;
}

.opt button:hover{
  background:#88ddb3;
  
}

.active{
  display:block;
}

JavaScript

function init(){

  var opt = document.getElementsByClassName('opt');
  
	var num = 0;
	var prop = [];
	var propVal = [];
	
  
  for (var i = 0 ; i < opt.length; i++)
  {
    opt[i].querySelector('input').value = "";
  }
  
  
  
   opt[num].querySelector('button').onclick = function()
  {
     prop[num] = opt[num].querySelector('input').name;
     propVal[num]= opt[num].querySelector('input').value;
    
    opt[num].className = "opt";
    opt[num+1].className ="opt active"; 
    console.log(prop +" "+ propVal);
     num++;
  };//button function
  
 
 
  
 
  
}


init();