JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p id="start_end_message"> Welcome to my game...Press next to begin<p>

<div id="question" style="display:none">
<p> Question 1....What is my favourite colour?<p> 
</div>

<br>

<div id="answers" style="display:none">
    <div id="ans1"></div><input type="radio" name="an" value=""/>
    <div id="ans2"></div><input type="radio" name="an" value="" checked/>
	<div id="ans3"></div><input type="radio" name="an" value=""/>
	<div id="ans4"></div><input type="radio" name="an" value=""/>
</div>

<br>

<div id="nextbuttondiv">
<button id="nextbutton" class="nextQ" onclick="nextQ()">Next</button>
</div>
</div>

JavaScript

var allQuestions = [
["Who is Prime Minister of the United Kingdom?", 
"What is my favourite colour?",
"What shape is the moon?",
"What year was the car invented?",
"What day do catholics go to mass?"],[
["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
["Red","Blue","Green","Another"],
["Square","Rectangle","Pentagon","Round"],
["1914","1924","1934","None of the above"],
["Never","Sunday","Tuesday","Monday"]], 
[0,1,3,3,1]];

var questionIndex = 0;

function nextQ () {
	questionIndex+=1;
	
	if (questionIndex <=5) {
	
	//hide welcome message 
	document.getElementById("start_end_message").style.display = "none";
	
	// change question part here
	document.getElementById("question").style.display = "inline-block";
	document.getElementById("question").innerHTML = "<b>Question " + questionIndex +"</b>: " + allQuestions[0][questionIndex-1];

	// change answer part here 
	document.getElementById("answers").style.display = "inline-block";	
	//document.getElementById("ans1").style.display = "inline-block";
	document.getElementById("ans1").innerHTML = allQuestions[1][questionIndex-1][0]; //change the innerHTML(the text that 	
	document.getElementById("ans2").innerHTML = allQuestions[1][questionIndex-1][1]; //appear in the browser) of id=rd*
	document.getElementById("ans3").innerHTML = allQuestions[1][questionIndex-1][2];
	document.getElementById("ans4").innerHTML = allQuestions[1][questionIndex-1][3];
	
	//change button part here
	//document.getElementById("nextbutton").innerHTML = "test";
	
	}
	else if(questionIndex ===6){
	
	//hide welcome/end message 
	document.getElementById("start_end_message").style.display = "inline-block";
	document.getElementById("start_end_message").innerHTML = "Well done you scored....";//message on Completion 
	
	// hide question part 
	document.getElementById("question").style.display = "none";
	
	// hide answer part 
	document.getElementById("answers").style.display = "none";
	
	// hide button...