JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
function displayquestion(a){
		var b = a-1;
		var currentInput = '';
		var questions = document.getElementsByClassName("questionholder");
		var showRequired = document.getElementById("requiredMessage");
		console.log("a = " + a + " and b = " + b);
		
		if (document.querySelector('input.input' + b) !== null) {
			var currentInput = document.querySelector('input.input' + b).value;
		}
			
		
		if (([0,3,4,7].indexOf(b) !== -1)) {	// Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc			
			console.log("path 1");
				showRequired.style.display = "none";		
			
				for(var i=0; i < questions.length; i++) {			
					questions[i].style.display = "none";	
				}

				var nextQuestion = document.getElementById("question" + a);

				if(nextQuestion !== null) {
					nextQuestion.style.display = "block";
				}			
		} else {							
			console.log("path 2");
			
			if (currentInput == '') {
				showRequired.style.display = "block";
			} else {
				showRequired.style.display = "none";		
			
				for(var i=0; i < questions.length; i++) {			
					questions[i].style.display = "none";	
				}

				var nextQuestion = document.getElementById("question" + a);

				if(nextQuestion !== null) {
					nextQuestion.style.display = "block";
				}
			}
		}		
	}
  </script>

<div id="requiredMessage" style="display:none"><p>This field is required.</p></div>

<div class="questionholder" id="question0" style="display:block">
        <a class="text2button" onclick="displayquestion(1)">Start</a>
    </div>
    <div class="questionholder" id="question1" style="display:none"> <!-- REQUIRED -->
        <h5>Surname</h5>
        <input class="input1" name="ln"><br>	
        <a class="text2button" onclick="displayquestion(2)">Next</a>
    </div>
    <div class="questionholder" id="question2" style="display:none">
        <h5>Given Name</h5>
        <input class="input2" name="gn"><br>
        <a class="text2button"...

JavaScript

function displayquestion(a){
		var b = a-1;
		var currentInput = '';
		var questions = document.getElementsByClassName("questionholder");
		var showRequired = document.getElementById("requiredMessage");
		console.log("a = " + a + " and b = " + b);
		
		if (document.querySelector('input.input' + b) !== null) {
			var currentInput = document.querySelector('input.input' + b).value;
		}
			
		
		if (([0,3,4,7].indexOf(b) !== -1)) {	// Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc			
			console.log("path 1");
				showRequired.style.display = "none";		
			
				for(var i=0; i < questions.length; i++) {			
					questions[i].style.display = "none";	
				}

				var nextQuestion = document.getElementById("question" + a);

				if(nextQuestion !== null) {
					nextQuestion.style.display = "block";
				}			
		} else {							
			console.log("path 2");
			
			if (currentInput == '') {
				showRequired.style.display = "block";
			} else {
				showRequired.style.display = "none";		
			
				for(var i=0; i < questions.length; i++) {			
					questions[i].style.display = "none";	
				}

				var nextQuestion = document.getElementById("question" + a);

				if(nextQuestion !== null) {
					nextQuestion.style.display = "block";
				}
			}
		}		
	}