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 class="step4" style="display: none;">
  <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="A" class="radio_1" id="radio_1" value="B" />
    </div>
    <div class="radio_2" style="display: none;">
      <label>C</label>
      <input type="radio" name="B" class="radio_2" id="radio_2" value="C" />
      <label>D</label>
      <input type="radio" name="B" class="radio_2" id="radio_3" value="D" />
    </div>
    <div class="radio_3" style="display: none;">
      <label>E</label>
      <input type="radio" name="C" class="radio_3" id="radio_4" value="E" />
      <label>F</label>
      <input type="radio" name="C" class="radio_3" id="radio_5" value="F" />
    </div>
  </div>
</div>

JavaScript

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

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

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