JSFiddle - React, Tailwind, and code Playground
HTML
<div id="firstdiv">
<div name = "div_1a">
1.เลืือกคำถามที่ต้องการไป
<select id="select_1a" name="select_1a" >
<option checked ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<br>
<div name= "div_1b">
<p>1b. Q1b?</p>
<input type="radio" name="1bradiogroup" value="1"> 1 <br>
<input type="radio" name="1bradiogroup" value="2"> 2 <br>
<input type="radio" name="1bradiogroup" value="3"> 3 <br>
</div>
<input type='button' id = "q1Next_btn" value='Save and Continue' />
</div>
<div id="secdiv" style="display:none">
<h1>2. Q2a</h1>
<br>
<div id="div_2a" name = "div_2a">
2a. just hit back btn to go back to Q1
<select id="select_2a" name="select_2a">
<option ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="div_2b" name= "div_2b">
<p>2b. Q2b?</p>
<input type="radio" name="2bradiogroup" value="1"> No <br>
<input type="radio" name="2bradiogroup" value="2"> Yes <br>
</div>
<input type='button' id="q2Back_btn" value='Back' />
<input type='button' id="q2Next_btn" value='Save and Continue'/>
</div>
JavaScript
$("#q1Next_btn").click(function(){
//put Q1 logic here..
if($("#select_1a option:selected").val()==1){
$("#firstdiv").hide(500);
$("#secdiv").show(500);
}else if($("#select_1a option:selected").val()==2){
$("#firstdiv").hide(500);
$("#secdiv").show(500);
// $("#select_2a").attr("disabled",true);
}
});
// --Q1 question handler END--
// --Q2 question handler--
$("#q2Back_btn").click(function(){
//put Q2 logic here..
$('#select_2a').prop('selectedIndex',0);
$('#div_2b').find("input[type='checkbox'],input[type='radio']").prop('checked',false);
$("#secdiv").hide(500);
$("#firstdiv").show(500);
});