JSFiddle - React, Tailwind, and code Playground

by Gildonei Mendes Anacleto Junior

HTML

<form name="form1" id="form1" method="post">
			<h5>Choose an option</h5>
			<h6>Question 1</h6>
			<label><input type="radio" name="question1" id="option1" value="0" checked="checked" class="has-dependent">No</label>
			<label><input type="radio" name="question1" id="option2" value="1" class="has-dependent">Yes</label>
			<hr>

			<h6>Question 2</h6>
			<label><input type="radio" name="question2" id="option1" value="0" checked="checked" class="has-dependent">No</label>
			<label><input type="radio" name="question2" id="option2" value="1" class="has-dependent">Yes</label>
			<hr>

			<h6>Question 3</h6>
			<label><input type="radio" name="question3" id="option1" value="0" checked="checked" class="has-dependent">No</label>
			<label><input type="radio" name="question3" id="option2" value="1" class="has-dependent">Yes</label>
			<hr>

			<div class="hidden" rel="question1">
				<h6>Sub option question 1</h6>
				<label><input type="radio" name="sub_question1" id="sub_option1" value="0" checked="checked">No</label>
				<label><input type="radio" name="sub_question1" id="sub_option2" value="1">Yes</label>
			</div>
			<div class="hidden" rel="question2">
				<h6>Sub option question 2</h6>
				<label><input type="radio" name="sub_question2" id="sub_option1" value="0" checked="checked">No</label>
				<label><input type="radio" name="sub_question2" id="sub_option2" value="1">Yes</label>
			</div>
			<div class="hidden" rel="question3">
				<h6>Sub option question 3</h6>
				<label><input type="radio" name="sub_question3" id="sub_option1" value="0" checked="checked">No</label>
				<label><input type="radio" name="sub_question3" id="sub_option2" value="1">Yes</label>
			</div>
		</form>

CSS

.hidden {
    display: none;
}

JavaScript

$(function() {
    // Get the list of hidden div
    var $objDependentDiv = $('div.hidden');
    $('.has-dependent').click(function(){
        // Gets specif dependent question
        var $objSpecificDiv = $('div[rel="' + $(this).attr('name') + '"]');
        
        // Force all sub question div to be hidden
        $objDependentDiv.addClass('hidden');
        
        // Shows specific subquestion div
        $objSpecificDiv.removeClass('hidden');
    });
});