JSFiddle - React, Tailwind, and code Playground

HTML

<html> 
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="js/realjs.js"></script>
    <body>

<!-- multistep form -->
  <form method="post" enctype="multipart/form-data" onsubmit="return validate_with_js(this)" id="msform">

    <!-- fieldsets -->
      

    <!-- First dropdown menu  --> 
    <div class ="form-group">
      <label>Describe your question</label><br>
      <select class="form-control" name="type" id="type" onchange="showForm()">
          <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Select Your Category-</option>
          <option value="mathcalc">SAT Math Calculator</option>
          <option value="mathnocalc">SAT Math No Calculator</option>
          <option value="reading">SAT Reading</option>
          <option value="writing">SAT Writing</option>
      </select>
    </div>

    <!-- Start of second dropdown menus  --> 
    <div class="form-group" name="topic1" id="f1" style="display:none">
            <select id="writing" onchange="showForm()">
              <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Select Your Topic-</option>
              <option value="science">Science</option>
              <option value="socialstudies">Social Studies</option>
              <option value="literature">Literature</option>
            </select>
    </div>

    <div class="form-group" name="topic2" id="f2" style="display:none">
            <select id="reading" onchange="showForm()">
              <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Select Your Topic-</option>
              <option value="science">Science</option>
       ...

JavaScript

function showForm() {

	var selopt = 'cool';
	selopt = document.getElementById("type").value;
	

	
	
	if (selopt == 'mathcalc') {
		document.getElementById("f1").style.display = "none";
		document.getElementById("f2").style.display = "none";
		document.getElementById("f3").style.display = "none";
		document.getElementById("f4").style.display = "block";
	}
	if (selopt == 'mathnocalc') {
		document.getElementById("f1").style.display = "none";
		document.getElementById("f2").style.display = "none";
		document.getElementById("f3").style.display = "block";
		document.getElementById("f4").style.display = "none";
	}
	if (selopt == 'reading') {
		document.getElementById("f1").style.display = "none";
		document.getElementById("f2").style.display = "block";
		document.getElementById("f3").style.display = "none";
		document.getElementById("f4").style.display = "none";
	}
	if (selopt == 'writing') {
		document.getElementById("f1").style.display = "block";
		document.getElementById("f2").style.display = "none";
		document.getElementById("f3").style.display = "none";
		document.getElementById("f4").style.display = "none";
	}

	if (selopt == '') {
		document.getElementById("f1").style.display = "none";
		document.getElementById("f2").style.display = "none";
		document.getElementById("f1").style.display = "none";
		document.getElementById("f2").style.display = "none";
	} 

	






	var writing = document.getElementById("writing").value;
	var reading = document.getElementById("reading").value;
	var mathnocalc = document.getElementById("mathnocalc").value;
	var mathcalc = document.getElementById("mathcalc").value;

	alert(reading);

	if (writing == 'science') {
	  
		document.getElementById("f5").style.display = "block";
		document.getElementById("f6").style.display = "none";
		document.getElementById("f7").style.display = "none";
		document.getElementById("f8").style.display = "none";
		document.getElementById("f9").style.display =...