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="0"/>
    <div id="ans2"></div><input type="radio" name="an" value="1"/>
	<div id="ans3"></div><input type="radio" name="an" value="2"/>
	<div id="ans4"></div><input type="radio" name="an" value="3"/>
</div>

<br>

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

<input type="button" value="tesT" onclick="getResult()" />

<p id="testing"> testing messages will appear here</p>
<p id="testcorrectans"> correct answer will appear here</p>
<p id="testscore"> score will appear here</p>

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;
var score = 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";
	
	
	
	//testing part
		//keep the score here... notes
	document.getElementById("testing").innerHTML = "getResult is " + getResult();  //getResult just this returns the actual function " func...}}}"
	document.getElementById("testcorrectans").innerHTML = "correct answer is " + allQuestions[2][questionIndex-2];
		//keep the score here...
		
				if(getResult() == allQuestions[2][questionIndex-2]) {
					//alert("inside if statement")
					if (getResult()...