JSFiddle - React, Tailwind, and code Playground

by Arshdeep Singh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-div">
<p>Question1: Where in the world would you find the Spire?</p> 
<span><input type="radio" name="radio" class="First"  value="a1"  /> Kerry. </span>
<span><input type="radio" name="radio" class="First" value="a1"  /> Galway. </span>
<span><input type="radio" name="radio" class="First" value="a1"  /> Dublin.</span>
<span><input type="radio" name="radio"   class="First" value="a1(4)"  /> Donegal. </span>
<div class="button_box">
    <button class="back" disabled="true" style="color:#aaa">Back</button>
   <button class="next">Next</button>
</div>   
</div>

<div class="next-div" style="display:none;">
   <p>Question2: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio"  class="second" value="a2(1)"  /> Taipei. </span>
<span><input type="radio" name="radio" class="second"  value="a2(2)"  /> Rome. </span>
<span><input type="radio" name="radio"  class="second" value="a2(3)"  /> Reykjavic.</span>
<span><input type="radio" name="radio" class="second"  value="a2(4)"  /> Brussels. </span>
<div class="button_box">
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
   </div>

<div class="next-div" style="display:none;">
    <p>Question3: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio" class="third"  value="a3(1)"  /> Taipei.</span>
<span><input type="radio" name="radio" class="third"  value="a3(2)"  /> Rome. </span>
<span><input type="radio" name="radio"  class="third" value="a3(3)"  /> Reykjavic. </span>
<span><input type="radio" name="radio" class="third" value="a3(4)"  /> Brussels. </span>
<div class="button_box">
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
</div>
<div class="next-div" style="display:none;">
    <p>Question4: Where in the world would you find the Colosseum?</p> 
<span><input type="radio"...

JavaScript

$('.next').click(function(){
		var obj = $(this);
    performMyAction(obj);
   
});
$('.finish').click(function(){
		var obj = $(this);
    performMyAction(obj);
   
});


function performMyAction(obj)
{
 		var objectmain = obj.parent().parent();
		$(objectmain).find("input").each(function () {
      if ( $(this).is(':checked')) {
          alert( $(this).val() );
      }
		});
   obj.parent().parent().hide().next().show();//hide parent and show next
}

$('.back').click(function(){
   $(this).parent().parent().hide().prev().show();//hide parent and show previous
});