JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<label>1</label>
<input type="radio" name="type" value="1" id="type_1" class="type_radio" />
</div>
<div>
<label>2</label>
<input type="radio" name="type" value="2" id="type_2" class="type_radio" />
</div>
<div>
<label>3</label>
<input type="radio" name="type" value="3" id="type_3" class="type_radio" />
</div>

<div class="step4" style="display: none;">
<div class="radio_1 radio" style="display: none;">
<label>A</label>
<input type="radio" name="A" class="rad_1" id="radi_1" value="A" />
<label>B</label>
<input type="radio" name="A" class="rad_1" id="radi_2" value="B" />
</div>
<div class="radio_2 radio" style="display: none;">
<label>C</label>
<input type="radio" name="B" class="rad_2" id="radi_3" value="C" />
<label>D</label>
<input type="radio" name="B" class="rad_2" id="radi_4" value="D" />
</div>
<div class="radio_3 radio" style="display: none;">
<label>E</label>
<input type="radio" name="C" class="rad_3" id="radi_5" value="E" />
<label>F</label>
<input type="radio" name="C" class="rad_3" id="radi_6" value="F" />
</div>
</div>

JavaScript

$('.type_radio').on('click', function () {
var radio = $(this).attr('id').split("_");
var radioId = radio[1];
$('.radio_' + radioId).show();
$('.radio').hide();
$('.step4').show();
});