JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div class="page active">
<div style="font-weight:bold">1.How long have you been working in field of Programming?</div><br/>
<input type="radio" name="1" value="Less than 2 years" style="cursor:pointer"/>
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">Less than 2 years</span>
<input type="radio" name="1" value="3-5 years" style="cursor:pointer"/>
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">3-5 years</span>
<input type="radio" name="1" value="6-10 years" style="cursor:pointer"/>
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">6-10 years</span>
<input type="radio" name="1" value="11-15 years" style="cursor:pointer" />
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">11-15 years</span>
</div>

<div class="page">
<div style="font-weight:bold">2.Second Question?</div><br/>
<input type="radio" name="1" value="Less than 2 years" style="cursor:pointer"/>
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">Less than 2 years</span>
<input type="radio" name="1" value="3-5 years" style="cursor:pointer"/>
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">3-5 years</span>
<input type="radio" name="1" value="6-10 years" style="cursor:pointer"/>
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">6-10 years</span>
<input type="radio" name="1" value="11-15 years" style="cursor:pointer" />
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">11-15 years</span>
</div>

<div class="page">
<div style="font-weight:bold">3.Another Question?</div><br/>
<input type="radio" name="1" value="Less than 2 years" style="cursor:pointer"/>
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">Less than 2 years</span>
<input type="radio" name="1" value="3-5 years" style="cursor:pointer"/>
<span...

CSS

.page {
    display: none;
}
.active {
    display: inherit;
}

JavaScript

$("#prev").on("click", function(){
    if($(".page.active").index() > 0)
        $(".page.active").removeClass("active").prev().addClass("active");
});
$("#next").on("click", function(){
    if($(".page.active").index() < $(".page").length-1)
        $(".page.active").removeClass("active").next().addClass("active");
});