JSFiddle - React, Tailwind, and code Playground
HTML
<form class="question_form show" >
<img src="image1.png" class="current_image" alt="">
<h3 class="question"> Question 1: </h3>
<hr>
<input type="radio" name="q1" value="q1-a">Answer 1
<br>
<input type="radio" name="q1" value="q1-b">Answer 2
<br>
<input type="radio" name="q1" value="q1-c">Answer 3
<br>
<br>
<input name="button" type="button" class="button" value="Next">
</form>
<form class="question_form hide">
<img src="image2.png" class="current_image" alt="">
<h3 class="question"> Question 2: </h3>
<hr>
<input type="radio" name="q2" value="q2-a">Answer 1
<br>
<input type="radio" name="q2" value="q2-b">Answer 2
<br>
<input type="radio" name="q2" value="q2-c">Answer 3
<br>
<br>
<input name="button" type="button" class="button" value="Next" />
</form>
<form class="question_form hide" >
<img src="image.png" class="current_image" alt="">
<h3 class="question"> Question 3: </h3>
<hr>
<input type="radio" name="q3" value="q3-a">Answer 1
<br>
<input type="radio" name="q3" value="q3-b">Answer 2
<br>
<input type="radio" name="q3" value="q3-c">Answer 3
<br>
<br>
<input name="button" type="button" class="button" value="Next">
</form>
CSS
.show {
display: inline;
}
.hide {
display: none;
}
JavaScript
$(".button").click(function(e){
var form = $(e.target).closest('form');
form.toggleClass("show hide");
form.next().toggleClass("show hide");
});