Bootstrap 4 Expand All / Collapse All button doesn't work when collapse element already showing

I made an Expand All / Collapse All button that works on the initial page load. However, if I expand "manually" one of the divs then it remains open and doesn't respond to the "Collapse All" button.

To recreate the issue:

1. Click Wildlife->Mammal Biodiversity->Brook Trout to view the Brook Trout table
2. Click the link Expand All to see all tables
3. Click Collapse All and the Brook Trout table stays open

I made a codepen with the issue here: https://codepen.io/xanabobana/pen/pobRxpx

My HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 text-right">
            <a id="expand-all" href="javascript:void(0);">Expand All</a>
        </div>
    </div>  
    <div class="row">
        <div class="col">
                <div class="card mb-3">
                  <div class="card-header justify-content-between d-flex align-items-center text-white bg-info">
                      <h4>Wildlife</h4>
                      <a class="category_carat"><i class="fa fa-caret-right"></i></a>                  
                  </div>
                  <div class="card-body">
                        <div class="row">
                                <div class="col-md order-2 order-md-1 mt-4 mt-md-0">                                                                        
                                    <div class="collapse categories-show">
                                          <div class="row">
                                              <div class="col-md order-2 order-md-1 mt-4 mt-md-0">
                                                      <h5 class="card-title"><a href="#subCategories-show" class="subcategory_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Mammal Biodiversity</h5>                          
                                              </div>
                                           </div>                                                                                                        
                                           <div class="find-table">
                                                 <div class="row ml-4">
                                                      <div class="col">
                                                             <div class="collapse subCategories-show">
                                                                  <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Brook Trout"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
                                                             </div>
                                                       </div>
                                                  </div>
                                                  <div class="row ml-4">
                                                      <div class="col">
                                                                <div class="collapse table-show">                       
                                                                        <div class="table-responsive">
                                                                            <table id="studyTableBrookTrout" class="table table-striped study-table" value="Brook Trout" style="width:100%">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>ID</th>
                                                                                    <th>Study</th>
                                                                                    <th>Indicator Categories</th>
                                                                                    <th>Years</th>
                                                                                    <th>Org</th>

                                                                                </tr>
                                                                            </thead>
                                                                        </table>
                                                                     </div>
                                                                </div>
                                                           </div>
                                                     </div>
                                               </div>                                                                                                        
                                               <div class="find-table">
                                                        <div class="row ml-4">
                                                            <div class="col">
                                                                <div class="collapse subCategories-show">
                                                                      <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Moose Population"><i class="fa fa-plus-circle"></i></a> Moose Population</h5>
                                                                 </div>
                                                            </div>
                                                        </div>
                                                        <div class="row ml-4">
                                                             <div class="col">
                                                                <div class="collapse table-show">                       
                                                                        <div class="table-responsive">
                                                                            <table id="studyTableMoosePopulation" class="table table-striped study-table" value="Moose Population" style="width:100%">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>ID</th>
                                                                                    <th>Study</th>
                                                                                    <th>Indicator Categories</th>
                                                                                    <th>Years</th>
                                                                                    <th>Org</th>

                                                                                </tr>
                                                                            </thead>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                         </div>
                                                      </div>                                                                                                      
                                                      <div class="find-table">
                                                         <div class="row ml-4">
                                                             <div class="col">
                                                                <div class="collapse subCategories-show">
                                                                    <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Little Northern Squirrel"><i class="fa fa-plus-circle"></i></a> Little Northern Squirrel</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         <div class="row ml-4">
                                                             <div class="col">
                                                                <div class="collapse table-show">                       
                                                                        <div class="table-responsive">
                                                                            <table id="studyTableLittleNorthernSquirrel" class="table table-striped study-table" value="Little Northern Squirrel" style="width:100%">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>ID</th>
                                                                                    <th>Study</th>
                                                                                    <th>Indicator Categories</th>
                                                                                    <th>Years</th>
                                                                                    <th>Org</th>

                                                                                </tr>
                                                                            </thead>
                                                                        </table>
                                                                     </div>
                                                                </div>
                                                           </div>
                                                      </div>
                                                 </div>
                                             </div>
                                         </div>
                                      </div>
                                  </div>
                             </div>
                        </div>
                    </div>
                </div>

My JS:

//show or collapse all
 $('#expand-all').on('click', function(e) {
     if (this.text==='Expand All') {
         this.text="Collapse All";

         $('.collapse').each(function(){
               if (!$(this).hasClass( "show" )) { 
                $(this).addClass('show');
            }

                $('.category_carat').each(function(){
                    this.innerHTML='<i class="fa fa-caret-down"></i>';
                });
                $('.subcategory_carat').each(function(){
                    this.innerHTML='<i class="fa fa-minus-circle"></i>';
                });
                $('.table_carat').each(function(){
                    this.innerHTML='<i class="fa fa-minus-circle"></i>';
                });
            });
        }
        else {
          this.text="Expand All";
         $('.collapse').each(function(){
         if ($(this).hasClass( "show" )) {
                $(this).removeClass('show');
            }
  

                $('.category_carat').each(function(){
                    this.innerHTML='<i class="fa fa-caret-right"></i>';
                });
                $('.subcategory_carat').each(function(){
                    this.innerHTML='<i class="fa fa-plus-circle"></i>';
                });
                $('.table_carat').each(function(){
                    this.innerHTML='<i class="fa fa-plus-circle"></i>';
                });
            });      
        }
    })
    
//show or collapse categories
           
          $(".category_carat").click(function(){
            $(this).closest(".card").find(".categories-show").slideToggle();
            //console.log($(this).closest(".card").find(".show-cat"));
            if (this.innerHTML==='<i class="fa fa-caret-down"></i>') {
                this.innerHTML='<i class="fa fa-caret-right"></i>';
            }
            else {
                this.innerHTML='<i class="fa fa-caret-down"></i>';
            }
          });
          
          $(".subcategory_carat").click(function(){
            $(this).closest(".card").find(".subCategories-show").slideToggle();
         
            if (this.innerHTML==='<i class="fa fa-plus-circle"></i>') {
                this.innerHTML='<i class="fa fa-minus-circle"></i>';
            }
            else {
                this.innerHTML='<i class="fa fa-plus-circle"></i>';
            }
          });
          
          
           $(".table_carat").click(function(){
            $(this).closest(".find-table").find(".table-show").slideToggle();
         
            if (this.innerHTML==='<i class="fa fa-plus-circle"></i>') {
                this.innerHTML='<i class="fa fa-minus-circle"></i>';
            }
            else {
                this.innerHTML='<i class="fa fa-plus-circle"></i>';
            }
          });