Pop down using jquery does not revert to original when selection is changed

Question

New to Jquery here.

When I click on anything that is 2 - Somewhat dissatisfied and below I want id="section1a" to pop down. This part works.

However if I change my selection back to anything 3 - Neither satisfied nor dissatisfied and above I want the popped id="section1a" to disappear. This isn't working. Your help here is appreciated.

my form code

<div class="row" name="satisfaction">
          <div class="col-md-2 col-4">
            <label>
              <input type="radio" class="form-control my-2" name="overall_rate" value="5 - Very satisfied">5 - Very satisfied
            </label>
          </div>
          <div class="col-md-2 col-4">
            <label>
              <input type="radio" class="form-control my-2" name="overall_rate" value="4 - Somewhat satisfied">4 - Somewhat satisfied
            </label>
          </div>
          <div class="col-md-2 col-4">
            <label>
              <input type="radio" class="form-control my-2" name="overall_rate" value="3 - Neither satisfied nor dissatisfied">3 - Neither satisfied nor dissatisfied
            </label>
          </div>
          <div class="col-md-2 col-4">
            <label>
              <input type="radio" class="form-control my-2" name="overall_rate" value="2 - Somewhat dissatisfied">2 - Somewhat dissatisfied
            </label>
          </div>
          <div class="col-md-2 col-4">
            <label>
              <input type="radio" class="form-control my-2" name="overall_rate" value="1 - Very dissatisfied">1 - Very dissatisfied
            </label>
          </div>
          <div class="col-md-2 col-4">
            <label>
              <input type="radio" class="form-control my-1" name="overall_rate" value="Don't Know / Doesn't Apply"> Don't Know / Doesn't Apply
            </label>
          </div>
        </div>

        <div id="section1a" class="d-none"> 
          <h6 class="text-yellow mt-4"> 1a. Please can you indicate which area we could do better? *
          </h6>
          <div class="row">
            <div class="col-md-12">
              <label>
                <input type="checkbox" name="improvement" class="form-control invisible-radio" value="option 1" onclick="onlyOne(this)">
                <span class="card-selector">option 1</span>
              </label>
              <label>
                <input type="checkbox" name="improvement" class="form-control invisible-radio" value="option 2" onclick="onlyOne(this)">
                <span class="card-selector">option 2</span>
              </label>
              <label>
                <input type="checkbox" name="improvement" class="form-control invisible-radio" value="option 3" onclick="onlyOne(this)">
                <span class="card-selector">option 3</span>
              </label>
              <label>
                <input type="checkbox" name="improvement" class="form-control invisible-radio" value="option 4" onclick="onlyOne(this)">
                <span class="card-selector">option 4</span>
              </label>
              </div>
          </div>
        </div>

Jquery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

 $('[name=satisfaction]').change(e=>{
const value=$(e.target).val();
    if(value!='5 - Very satisfied'){
      if(value!='4 - Somewhat satisfied'){
       if(value!='3 - Neither satisfied nor dissatisfied'){
          $('#section1a').removeClass('d-none');
        }
        else {
          $('#section1a').addClass('d-none');
          $('#section1a [type=radio]').prop('checked',false).trigger('change');
               }
  }
                                 );