Creating a dynamic bootstrap tab menu for WordPress

Question

I'm trying to create a dynamic bootstrap tab menu for WordPress. I showed the categories as a menu on the front page. According to the menu title, the correct loop result does not appear and I click on the tabs but the relevant content does not work. So the tabs are not responding. I tried hard but I'm stuck here. Please can someone help?

click on the categories, the relevant content will be shown without refreshing the page.

<section class="my-5 px-5">
        <nav class="my-3 d-flex justify-content-center">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <?php $i = 0; ?>
                <?php
                $args = array(
                    'post_type'    => 'customjob',
                    'taxonomy'     => 'subjects',
                    'orderby'      => 'name',
                    'order'        => 'ASC',
                    'parent'       => 0,
                    'hide_empty'   => 0,
                    'hierarchical' => 1,
                    'show_count' => true,
                );
                $cats   = get_categories($args);
                foreach($cats as $cat) {
                    ?>
                    <a href="<?php echo get_category_link($cat->term_id); ?>" class="nav-link <?php if ($i == 1) { echo 'active'; } else { echo ' ';} ?>" id="nav-<?php echo $cat->name; ?>-tab" data-bs-toggle="tab" data-bs-target="#nav-<?php echo $cat->name; ?>" type="button" role="tab" aria-controls="nav-<?php echo $cat->name; ?>" aria-selected="<?php if ($i == 1) { echo 'true'; } else { echo 'false'; } ?>"><?php echo $cat->name; ?></a>
                    <?php $i++; ?>
                <?php } ?>
            </div>
        </nav>
        <div class="row tab-content" id="nav-tabContent">
            <?php $the_query = new WP_Query(array( 'post_type' => array('customjob'), 'posts_per_page' => -1, 'orderby' => 'date' )); ?>
            <?php $i = 0; ?>
            <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <?php $i++; ?>
                <div class="col-md-4 tab-pane <?php if ($i == 1) { echo 'fade show active'; } else { echo ' ';} ?>" id="nav-<?php echo $cat->name; ?>-tab" role="tabpanel" aria-labelledby="nav-<?php echo $cat->name; ?>-tab">
                    <div class="tab-img img-s text-center px-5"><?php the_post_thumbnail(); ?><?php the_title(); ?></div>
                </div>
            <?php endwhile; wp_reset_postdata(); else : ''; endif; ?>
        </div>
    </section>