JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <div id="area1">
    <p>Q1</p>
    <input type="radio" name="q1" value="1">a
    <input type="radio" name="q1" value="2">b
    <br>
    <button id="b1">Go Q2</button>
  </div>
  <div id="area2">
    <p>Q2</p>
    <input type="radio" name="q2" value="3">c
    <input type="radio" name="q2" value="4">d
    <br>
    <button id="b2">Go Q3</button>
  </div>
  <div id="area3">
    <p>Q3</p>
    <input type="radio" name="q3" value="5">e
    <input type="radio" name="q3" value="6">f
    <br>
    <button id="b3">Submit</button>
  </div>

  <script>
  	var answer = ""
    $("#area2").hide();
    $("#area3").hide();
    
    $("#b1").click(function() {
			answer = $('input[name=q1]:checked').val()
      $("#area1").hide();
      $("#area2").show();
    });

    $("#b2").click(function() {
    	answer += $('input[name=q2]:checked').val()
      $("#area2").hide();
      $("#area3").show();
    });

    $("#b3").click(function() {
    	answer += $('input[name=q3]:checked').val()
    	alert(answer)
    });

  </script>

</html>