JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<h1>Troubleshooting</h1>
	<h2>What needs to be fixed?</h2>
<form>
    <div><label><input type="radio" name="group1" value="in1">Internet</label></div>  
    <div><label><input type="radio" name="group1" value="tv1">TV</label></div>  
    <div><label><input type="radio" name="group1" value="ph1">Phone</label></div>  
</form>

<div id="in1" class="desc" data-box="1">
<h3>Internet Troubleshooting</h3>
	<h3>Are there lights on the router?</h3>
	<form>
    	<div><label><input type="radio" name="group1" value="in2">Yes</label></div>  
    	<div><label><input type="radio" name="group1" value="in3">No</label></div>
	</form>
</div>

<div id="in2" class="desc" data-box="2">
<h3>Is the power light red?</h3>
	<form>
    	<div><label><input type="radio" name="group1" value="in4">Yes</label></div>  
    	<div><label><input type="radio" name="group1" value="in5">No</label></div>  
	</form>
</div>
<div id="in3" class="desc" data-box="3">
<h3>Is the router plugged in?</h3>
	<form>
    	<div><label><input type="radio" name="group1" value="in6">Yes</label></div>  
    	<div><label><input type="radio" name="group1" value="in7">No</label></div>  
	</form>
</div>

<div id="in6" class="desc" data-box="4">
<h3>Plug the router into another outlet. Is the power light on?</h3>
	<form>
    	<div><label><input type="radio" name="group1" value="in4">Yes</label></div>  
    	<div><label><input type="radio" name="group1" value="in5">No</label></div>  
	</form>
</div>

<div id="in4" class="desc" data-box="5">
<h3>Failing Device</h3>
	<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>

<div id="in7" class="desc" data-box="6">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>

<div id="tv1" class="desc" data-box="7">
<h1>TV Troubleshooting</h1>
	<form>
    	<div><label><input...

CSS

.desc { display: none; }

JavaScript

$(document).ready(function(){ 
    var lastBoxOpened = 0;
    
    $("input[name$='group1']").click(function() {
        var boxNumber = parseInt($(this).parents('.desc').attr("data-box"));
        
        //check if the data-box was succesfully retrieved. If not, first option chosen, reset all of it
        if(isNaN(boxNumber)){
         boxNumber = 0;
        }
            
        var test = $(this).val();
        var target = $("#"+test)
        var newBoxOpened = target.attr("data-box");
        //check if the last opened box was an earlier one than the newly clicked one
        if(lastBoxOpened > boxNumber){
         //hide boxes beyond the one we opened now
         $('.desc').each(function(){
         //if box number is bigger than the currently clicked box, close them.
          if($(this).attr("data-box") > boxNumber){
          $(this).hide();
          //uncheck the previously selected radio buttons in now hidden things
          $('input', this).prop("checked", false);
          }
         });
        }
        //render target box
         target.show();
         //update last opened box to the newly opened one
         lastBoxOpened = newBoxOpened;
    }); 
});