JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

HTML

<div class="first-div">
  <p>Question1: Where in the world would you find the Spire?</p>
  <span><input type="radio" name="radio" id="a1" value="a1"  /> Kerry. </input></span>
  <span><input type="radio" name="radio" id="a1" value="a1"  /> Galway. </input></span>
  <span><input type="radio" name="radio" id="a1" value="a1"  /> Dublin. </input></span>
  <span><input type="radio" name="radio" id="a1" value="a1"  /> Donegal. </input></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" id="b1" value="a2"  /> Taipei. </input></span>
  <span><input type="radio" name="radio" id="b1" value="a2"  /> Rome. </input></span>
  <span><input type="radio" name="radio" id="b1" value="a2"  /> Reykjavic. </input></span>
  <span><input type="radio" name="radio" id="b1" value="a2"  /> Brussels. </input></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" id="c1" value="a3"  /> Taipei. </input></span>
  <span><input type="radio" name="radio" id="c1" value="a3"  /> Rome. </input></span>
  <span><input type="radio" name="radio" id="c1" value="a3"  /> Reykjavic. </input></span>
  <span><input type="radio" name="radio" id="c1" value="a3"  /> Brussels. </input></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" name="radio" id="d1" value="a3"  /> Taipei. </input></span>
  <span><input...

JavaScript

$('.next').click(function() {
	if(validateAnswer())
  	$(this).parents('[class$="-div"]').hide().next().show(); //hide parent and show next
});

$('.back').click(function() {
  $(this).parents('[class$="-div"]').hide().prev().show(); //hide parent and show previous
});

function validateAnswer(){
	return $('[class$="-div"] :visible')
  				.find('input[name="radio"]')
          .is(":checked");
}