Как сделать, чтобы удалялся класс и срабатывал клик на первый таб?

Question

[kentos]

Здравствуйте, пишу табы, проблема такая, если я кликаю по табам, то когда кликаю на первый таб, то почему-то не срабатывает, не показывает что внутри, и вторая проблема, я сделал, чтобы при клике добавлялся класс активного таба, но когда кликаю на другой, то остается на прошлом и добавляется не предыдущем, как удалять на предыдущем?

<div class="nav_tabs_container">
            <span class="tabs" id="my-tabid1" data-target=".my-section1.box"><img src="/wp-content/uploads/2021/01/music-lamp-ic.png">MUSIC LAMP</span>
            <span class="tabs" id="my-tabid2"  data-target=".my-section2.box"><img src="/wp-content/uploads/2021/01/posters_ic.png">POSTERS</span>
            <span class="tabs" id="my-tabid3" data-target=".my-section3.box"><img src="/wp-content/uploads/2021/01/led-lamp-ic.png">LED LAMP</span>
            <span class="tabs" id="my-tabid4" data-target=".my-section4.box"><img src="/wp-content/uploads/2021/01/build-blocks-ic.png">BUILDING BLOCKS</span>
            </div>

            <div class="my_section1 box active" id="my-tab1">
            <?php echo do_shortcode ('[product_category category="music-lamp" per_page="5" columns="5"]'); ?>
            </div>

            <div class="my-section2 box" id="my-tab2">
            <?php echo do_shortcode ('[product_category category="posters" per_page="5" columns="5"]'); ?>
            </div>

            <div class="my-section3 box" id="my_tab3">
            <?php echo do_shortcode ('[product_category category="led-lamp" per_page="5" columns="5"]'); ?>
            </div>
    <div class="my-section4 box" id="my_tab4">
            <?php echo do_shortcode ('[product_category category="building-blocks" per_page="5" columns="5"]'); ?>
            </div>
    <style>
    .nav_tabs_container {
        display: flex;
    }

    .nav_tabs_container button {
        background-color: transparent;
    }

    .nav_tabs_container .active_tab {
        background-color: #EBF6F4;
    }

    .box {
    display: none;
    }
    .box.active {
    display: block;
    }

    @media (max-width: 768px) {
        .nav_tabs_container {
            flex-direction: column;
        }
    }
    </style>
            <script>
    jQuery(function($) {
            $('.tabs').on('click', function(){
            $(this).toggleClass('active_tab');
            var $target = $($(this).data('target'));
            $target.siblings().removeClass('active');
            $target.addClass('active');
            });
    });
        </script>