JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script type="text/javascript">
    function displayquestion(a){
		var currentDIV = document.getElementById("question" + a);
		var currentInput = document.querySelector('input').value;
		var questions = document.getElementsByClassName("questionholder");
		var showRequired = document.getElementById("requiredMessage");
		console.log(currentInput == '');	
		
		if (a == 1){	// Enter here all question # that should be IGNORED. question0 = 1, question1 = 2, etc
				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 {
			if (currentInput == '') {
				showRequired.style.display = "block";
			}
		}		
	} 

</script>
</head>

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

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

CSS

.invalid {
  border-color:red;
}