Wordpress Dynamic Bootstrap 5 carousel with active indicator in middle

Question

I have a gallery site where a get_posts attachment loop opens images up in a Bootstrap 5 Modal, which opens up a Bootstrap Carousel. A second loop creates the indicator thumbnail navigation (max of 7 thumbs).

I cannot figure out how to get the indicator that links to the active slide to always remain in the middle.

Here is my code:

<div id="carousel-thumbs" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
          
       <div class="carousel-inner">
            <div class="col-9 mx-auto">

                 <?php $args = array( 
                      'post_type' => 'attachment', 
                      'post_status' => 'inherit', 
                      'post_mime_type' => 'image', 
                      'posts_per_page' => 100000,
                      'order' => 'DESC', 
                  );

                      $thumbs = get_posts($args); if ($thumbs): ?>
                                            
        <?php $i=1; foreach( $thumbs as $thumb): 
               $thumb_url = wp_get_attachment_image_url($thumb->ID, 'thumbnail'); 
        ?>
                                                
              <div id="carousel-selector-<?= $i;?>" class="bs-thumb py-2 col text-center selected <?php if( $i==0 ){ echo 'active'; };?>" data-bs-target="#gallery-carousel" data-bs-slide-to="<?= $i;?>">
                   <img src="<?php echo $thumb_url; ?>" class="d-block mx-auto carousel-thumb" style=" width: 60px; height: 60px;"/>
              </div>

          <?php  $i++; endforeach; ?>
                                            
          <?php endif; ?><!-- Image Loop Close -->
       </div>
     </div>
   </div>

And jQuery:

(function ($) {  

  
  $('[id^=carousel-selector-]').click(function() {
    var id_selector = $(this).attr('id');
    var id = parseInt( id_selector.substr(id_selector.lastIndexOf('-') + 1) );
    $('#gallery-carousel').carousel(id);
  });

  // Group every 7 images into a row (3 on mobile) 
  var $lines = $('.bs-thumb'),
  holder = []; 

    $lines.each(function (i, item) {
    holder.push(item);

    if ($(window).width() < 575) {
        if (holder.length === 3) {
        $(holder).wrapAll('<div class="row  mx-0 bs-thumb-wrap" />');
        holder.length  = 0;
        }
    }

    if ($(window).width() > 575) {
        if (holder.length === 7) {
        $(holder).wrapAll('<div class="row justify-content-center mx-0 px-5 bs-thumb-wrap" />');
        holder.length  = 0;
        }
    }

    });

    $(holder).wrapAll('<div class="row mx-0 bs-thumb-wrap" />');

    // Group each row into wrap
    var $groups = $('.bs-thumb-wrap'),
    wrap = []; 
  
      $groups.each(function (i, item) {
        wrap.push(item);
  
      if (wrap.length === 1) {
      $(wrap).wrapAll('<div class="carousel-item" />');
      wrap.length  = 0;
      }
      });
  
      $(wrap).wrapAll('<div class="carousel-item" />');

    // Add active class to first row
    $("#carousel-thumbs .carousel-item:nth-child(1)").addClass("active");
    
    // when the carousel slides, auto update
    $('#gallery-carousel').on('slide.bs.carousel', function(e) {
        var id = parseInt( $(e.relatedTarget).attr('data-slide-number') );
        $('[id^=carousel-selector-]').removeClass('selected');
        $('[id=carousel-selector-'+id+']').addClass('selected');
    });


})(jQuery);