JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <form class="" id="register" method="POST" action="" > 

         <div id="q0" class="notshown shown form-group">      
                  <div class="form-group">
                  step 1
                    <select id="i_am"  class="form-control">
                      <option value="">Choose your gender</option>
                      <option value="1-1">Men</option>
                      <option value="1-2">Woman</option>
                    </select>
                  </div>
                     <a class="btn btn-danger" onclick="next()">NEXT</a>                                      
    		 </div>
                   
          <div id="q1" class="notshown form-group">
                  <div class="form-group">
                    step 2
                    <input class="form-control" id="province_id" placeholder="City name" required="required">
                  </div>                      
                    <a class="btn btn-danger" onclick="next()" type="submit">NEXT</a>                                                                                              	                     
           </div>
                           
            <div id="q2" class="notshown">                         
                  <div class="form-group">
                    step 3
                    <input type="text" id="email_id"  placeholder="Your email" required="required">
                      <div id="youremailidMsg"></div>        
                  </div>                                                            
                      <button type="submit" class="btn btn-danger" >REGISTER</button>                                               </div>                                            	                        	 	              
  </form>

CSS

.notshown {
  display: none;            
}

.shown {
  display: block;   
}

JavaScript

window.onload = function() {
    document.getElementById("i_am").focus();
  };

  var form = document.getElementById('register'); 
  form.noValidate = true;
  form.addEventListener('submit', function(event) {

      if (!event.target.checkValidity()) {
            event.preventDefault(); 
             document.getElementById('youremailidMsg').innerHTML = document.getElementById('email_id').value == '' ? 'Please enter your email' : '';  
      }
       
    }, false);

var questionNumber=0;
    var questions=document.querySelectorAll('.notshown');
            function next(){
              questionNumber++;

              if(questions.length>questionNumber)
              {
                    document.querySelector('.shown').classList.remove('shown');
              		questions[questionNumber].classList.add('shown');
              	
              }
                              
        }