Try putting the radio button inside a radio button

Question

Basically, I'm following this post of mine and if I have to display a radio button with a and display div inside of it, the following solution works fine:

$(".tier1-options :radio").on("change", function (e) {
  //remove shown class from all tier2 options and clear values from all form elements inside it
  $('.tier2-options')
    .removeClass('shown')
    .find('input, select').val('')
  
  //show the related tier2 options
  $(this)
    .parents('.tier1-options')
    .find('.tier2-options')
    .addClass('shown')
});

.tier2-options {
  display: none;
  margin-left: 1rem;
  padding: 1rem;
  background-color: #EEE;
}

.shown{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h5>Select one of the checkboxes:</h5>

<div class='tier1-options'>
  <label>
    <input name="useroption" type="radio" value="changeLocation">
    Change Location
  </label>

  <div class="tier2-options">
    <select name="availableMarkAsFullLocations">
      <option value="-">--Please Select--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
      <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="updateLocation">
    Update Location
  </label>

  <div class="tier2-options">
    <select name="availableUpdateLocations">
      <option value="-">--Please Select--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
    </select>
  </div>
</div>


<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="retireLocation">
    Retire
  </label>

  <div class="tier2-options">
    <select name="availableRetireLocations">
       <option value="-">--Please Select--</option>
       <option value="3">BOX#3</option>
       <option value="6">FREEZER#1</option>
       <option value="8">FREEZER#2</option>
       <option value="19">BOX#9</option>
       <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

But when I try to add multiple radio buttons, this code does not work with the Mobile Content option. Basically, when I click Tier I Move or Tier II Move

, subtier2-options does not show up

$(".tier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.tier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.tier1-options')
        .find('.tier2-options')
        .addClass('shown')
    });
    
    $(".subtier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.subtier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.subtier1-options')
        .find('.subtier2-options')
        .addClass('shown')
    });
    
    

    .tier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }

    .shown{
      display: block;
    }
    
    .subtier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <h5>Select one of the checkboxes:</h5>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="changeLocation">
        Change Location
      </label>

      <div class="tier2-options">
        <select name="availableMarkAsFullLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
          <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="updateLocation">
        Update Location
      </label>

      <div class="tier2-options">
        <select name="availableUpdateLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
        </select>
      </div>
    </div>


    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="retireLocation">
        Retire
      </label>

      <div class="tier2-options">
        <select name="availableRetireLocations">
           <option value="-">--Please Select--</option>
           <option value="3">BOX#3</option>
           <option value="6">FREEZER#1</option>
           <option value="8">FREEZER#2</option>
           <option value="19">BOX#9</option>
           <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="moveContents">
        Move Contents
      </label>

        <div class="tier2-options">
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierI">
                  Tier I move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierII">
                  Tier II move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierIILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             
        </div>
    </div>

Answer 1

When you use classes in a css file, the classes are applied in the order they are written. Since the shown class is above the subtier2-options class, it is applied first. So when subtier2-options is applied, the display is set to block and then changes to none.

You just need to change the order of the classes in css as shown below and then it will work.

$(".tier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.tier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.tier1-options')
        .find('.tier2-options')
        .addClass('shown')
    });
    
    $(".subtier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.subtier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.subtier1-options')
        .find('.subtier2-options')
        .addClass('shown')
    });
    
    

    .tier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }
    
    .subtier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }

    .shown{
      display: block;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <h5>Select one of the checkboxes:</h5>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="changeLocation">
        Change Location
      </label>

      <div class="tier2-options">
        <select name="availableMarkAsFullLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
          <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="updateLocation">
        Update Location
      </label>

      <div class="tier2-options">
        <select name="availableUpdateLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
        </select>
      </div>
    </div>


    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="retireLocation">
        Retire
      </label>

      <div class="tier2-options">
        <select name="availableRetireLocations">
           <option value="-">--Please Select--</option>
           <option value="3">BOX#3</option>
           <option value="6">FREEZER#1</option>
           <option value="8">FREEZER#2</option>
           <option value="19">BOX#9</option>
           <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="moveContents">
        Move Contents
      </label>

        <div class="tier2-options">
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierI">
                  Tier I move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierII">
                  Tier II move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierIILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             
        </div>
    </div>