JSFiddle - React, Tailwind, and code Playground

HTML

<div>
			<label>1</label>
			<input type="radio" name="type" value="1" id="type_1" class="type" />
			</div>
		  <div>
			<label>2</label>
			<input type="radio" name="type" value="2" id="type_2" class="type" />
			</div>
			<div>
			<label>3</label>
		  <input type="radio" name="type" value="3" id="type_3" class="type" />
			</div>
			     
           	<div>
			    	<div class="radio_1" style="display: none;">
					  <label>A</label>
   	<input type="radio" name="A" class="radio_1" id="radio_1" value="A" />
				   	<label>B</label>
		<input type="radio" name="B" class="radio_1" id="radio_1" value="B"  />
			     	</div>       
            <div class="radio_2" style="display: none;">  
		        <label>C</label>
	  <input type="radio" name="C" class="radio_2" id="radio_2" value="C" />
		        <label>D</label>
		<input type="radio" name="D" class="radio_2" id="radio_2" value="D" />
				    </div>
            <div class="radio_3" style="display: none;">  
         		<label>E</label>
    <input type="radio" name="E" class="radio_3" id="radio_3" value="E" />
   					<label>F</label>
    <input type="radio" name="F" class="radio_3" id="radio_3" value="F" />
            <div>
      	    </div>

JavaScript

//Covertype 1,2,3   
$("#type_1").click(function() {
  $(".radio_3").hide();
  $(".radio_2").hide();
  $(".radio_1").show();
});

$("#type_2").click(function() {
  $(".radio_2").show();
  $(".radio_3").hide();
  $(".radio_1").hide(); 
});

$("#type_3").click(function() {
  $(".radio_2").hide();
  $(".radio_3").show();
  $(".radio_1").hide();  
});