JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="header">
<h1>Which Harry Potter Character is You?</h1>
</div>
<div id="main">

<div id="mainwrap">
<form id="hp">
    <div>
	<h2>1. Which one do you prefer?</h2>
	<div>	
		<input type="radio" name="q1" id="radio1" class="radio" value="9"/>
		<label for="radio1">Tea</label>
	</div>
	<div>	
		<input type="radio" name="q1" id="radio2" class="radio" value="6"/>
		<label for="radio2">Coffee</label>
	</div>
	<div>	
		<input type="radio" name="q1" id="radio3" class="radio" value="1"/>
		<label for="radio3">Milk</label>
	</div>
	</div>

	<div>
		</br>
	
	</div>
	<div>
	</br>
	<div><div>
    <button type="button" onclick="hp(this.form)" class="checkbutton">Say my Character</button>
	<input type="reset" onclick="hpreset(this.form)" value="Try Again" class="resetbutton">
	</div></div></div>
</form>
	<div id="total"></div>
	<div id="result"></div>
</div>









</div>
</body>

JavaScript

function hp(form) {
	var i1,i2,i3,i4,i5,i6,i7,i8,i9,ii0;
	var count1 = 0,
		count2 = 0,
		count3 = 0,
		count4 = 0,
		count5 = 0,
		count6 = 0,
		count7 = 0,
		count8 = 0,
		count9 = 0,
		count10 = 0,
		a;
//First Question		
	for (i1 = 0; i1 < 3; i1++) {
		if (form.q1[i1].checked === true) {
			count1++;
			break;
		}
	}
	if (count1 !== 1) {
		alert("Please Answer 1st Question");
		return false;
	}
answer1 = form.q1[i1].value;
a1 = Math.floor(answer1);    
    	document.getElementById("result").innerHTML = "The selected values are " + "</br>" + a1+a2+a3+a4+a5+a6+a7+a8+a9+a10+"</br>"+c;
}