Bootstrap Portfolio Gallery button active when page is load

I would like the first entry of the filters - immersive - to be active when I open the page, but when I click on another entry it is no longer active

This is my html:

    <div class="container works">
    <div class="row">
        <div class="col-sm-12 order-sm-2 col-md-9 col-lg-9">
            <div class="gallery_product filter immersive">
                <?php echo do_shortcode('[acf field="immersive"]'); ?>
            </div>
            <div class="gallery_product filter showreel">
                <?php echo do_shortcode('[acf field="reel"]'); ?>
            </div>
            <div class="gallery_product filter multimedia">
                <?php echo do_shortcode('[acf field="multimedia"]'); ?>
            </div>
            <div class="gallery_product filter videomapping">
                <?php echo do_shortcode('[acf field="videomapping"]'); ?>
            </div>
            <div class="gallery_product filter events">
                <?php echo do_shortcode('[acf field="events"]'); ?>
            </div>
            <div class="gallery_product filter performance">
                <?php echo do_shortcode('[acf field="performance"]'); ?>
            </div>
            <div class="gallery_product filter vrar">
                <?php echo do_shortcode('[acf field="vrar"]'); ?>
            </div>
        </div>

        <div class="col-sm-12 order-sm-1 col-md-3 col-lg-3">
            <div id="myBtnContainer" class="voice_works">
                <button type="button" class="lavori filter-button active immersive" data-filter="immersive">
                    <i class="fa-regular fa-circle cerchio-works"></i> IMMERSIVE EXPERIENCES
                </button>
                <br>
                <button type="button" class="lavori filter-button" data-filter="showreel">
                    <i class="fa-regular fa-circle cerchio-works"></i> SHOWREEL
                </button>
                <br>
                <button type="button" class="lavori filter-button" data-filter="multimedia">
                    <i class="fa-regular fa-circle cerchio-works"></i> MULTIMEDIA INSTALLATIONS
                </button>
                <br>
                <button type="button" class="lavori filter-button" data-filter="videomapping">
                    <i class="fa-regular fa-circle cerchio-works"></i> VIDEOMAPPING
                </button>
                <br>
                <button type="button" class="lavori filter-button" data-filter="events">
                    <i class="fa-regular fa-circle cerchio-works"></i> CONTENT FOR EVENTS
                </button>
                <br>
                <button type="button" class="lavori filter-button" data-filter="performance">
                    <i class="fa-regular fa-circle cerchio-works"></i>MULTIMEDIA PERFORMANCE
                </button>
                <br>
                <button type="button" class="lavori filter-button" data-filter="vrar">
                    <i class="fa-regular fa-circle cerchio-works"></i>VR & AR
                </button>
            </div>
        </div>

    </div>
</div>

This is my js

$(document).ready(function(){
    $(".filter").not('.immersive').hide(); $('.filter').filter('.immersive').show();

    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');
        
        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');
            
        }
    });
    
    if ($(".filter-button").removeClass("active")) {
$(this).addClass("active");
}
$(this).addClass("active");

});

this is my css

button.lavori{
    background: transparent;
    font-size: 14px;
    font-family: roc-grotesk, sans-serif;;
    color: #fff;
    box-shadow: none;
    text-shadow: none;
    border: none;
}

.filter-button{
    margin-bottom: 10px;
}

i.cerchio-works {
    color: #F0801C;
    margin-right: 10px;
}

.active i.cerchio-works {
    background: #F0801C;
    border-radius: 100%;
}

button.lavori:active > i.cerchio-works, button.lavori:focus > i.cerchio-works, button.lavori:target > i.cerchio-works, button.lavori:active:focus > i.cerchio-works {
    outline: none;
    box-shadow: none;
    background-color: #F0801C;
    border-radius: 100%;
    border: 1px solid #F0801C;
}

.btn.active {
  background-color: #666;
  color: white;
}

iframe {
    width: 100%;
    min-height: 564px;
}

.voice_works{
    margin-top: 100%;
}

I have found numerous guides about it, but none of them work with my system.