I have a dynamic tab list, I wanted to add a tab "All" The click of tab 3all" display all pots

For this code, it only shows dynamic tab, so, I am looking for a solution to add a tab "All"

I tried some solution but I did not arrive

The idea it'is to add atatic tab "All"

 <?php
    echo '<ul class="nav nav-tabs" role="tablist">';
    $args = array(
        'taxonomy' => 'annualreports_category',
        'hide_empty'=>0,
        'orderby' => 'name',
        'order' => 'ASC'
    );
    $categories = get_categories($args);
    foreach($categories as $category) { 
        echo 
            '<li>
                <span data-href="'.$category->slug.'" role="tab" data-toggle="tab">    
                    '.$category->name.'
                </span>
            </li>';
    }
    echo '</ul>';
    
    echo '<div class="investors-content">';
    foreach($categories as $category) { 
        echo '<div class="tab-pane" id="' . $category->slug.'">';
        $catslug = $category->slug;
        $the_query = new WP_Query(array(
            'post_type' => 'annualreports_post',
            'posts_per_page' => -1,
            'tax_query' => array(
                            array(
                                'taxonomy' => 'annualreports_category',
                                'field'    => 'slug',
                                'terms'    => array( $catslug ),
                                'operator' => 'IN'
                            ),
                        ),
        ));                 
        while ( $the_query->have_posts() ) : 
        $the_query->the_post();
            echo '<h1>';
            the_title();
            echo '</h1>';
        endwhile; 
        echo '</div>';
    } 
    echo '</div>';
    ?>

<script>

$(".investors-content .tab-pane").each(function(){
    $(this).hide();
    $('.investors-content .tab-pane:first-child()').show();
});

$('.nav-tabs li>span').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-href');
    $(".investors-content .tab-pane").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});