Swiper does not work in separated Tab in PHP

In the <div class="B"> section, if I write:

<?php for ($i = 1; $ i <= 1; $i++) : ?>

it works, however this:

<?php for ($i = 1; $i <= 7; $i++) : ?> 

does not work like a photo.

Somebody knows why this happens?

My PHP code:

<?php

/**
 * Template Name: xxxxxx
 */

?>

<?php get_header(); ?>
<main>

    <section class="sec-t">
        <div class="cnt">
            <div class="store_info">
                <div class="A">
                    <div class="about-shop">
                        <div>
                            <div class="swiper-container main-image-container">
                                <div class="swiper-wrapper">
                                    <?php for ($i = 1; $i <= 17; $i++) : ?>
                                        <div class="swiper-slide">
                                            <img src="<?php imgurl(); ?>/store/xxx_store/xxx_store_inside/xxx_store_inside<?php echo $i; ?>.jpg" alt="xxx<?php echo $i; ?>">
                                        </div>
                                    <?php endfor; ?>
                                </div>
                                <?php
                                if ($i > 2): ?>
                                    <div class="swiper-pagination"></div>
                                <?php endif; ?>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                        <div class="swiper-container seat-image-container">
                            <div class="swiper-wrapper">
                                <?php for ($i = 1; $i <= 7; $i++) : ?>
                                    <div class="swiper-slide">
                                        <img src="<?php imgurl(); ?>/store/xxx_store/xxx_c/xxx_c<?php echo $i; ?>.jpg" alt="c_seat_image<?php echo $i; ?>">
                                    </div>
                                <?php endfor; ?>
                            </div>
                            <?php
                            if ($i > 2): ?>
                                <div class="swiper-pagination"></div>
                            <?php endif; ?>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="B">
            <div class="cnt">
                    <div class="swiper-container seat-image-container">
                        <div class="swiper-wrapper">
                            <?php for ($i = 1; $i <= 7; $i++) : ?>
                                <div class="swiper-slide">
                                    <img src="<?php imgurl(); ?>/store/xxx_store/xxx_c/xxx_c<?php echo $i; ?>.jpg" alt="c_seat_image<?php echo $i; ?>">
                                </div>
                            <?php endfor; ?>
                        </div>
                        <?php

                        if ($i > 2): ?>
                            <div class="swiper-pagination2"></div>
                        <?php endif; ?>
                        <div class="swiper-button-next2"></div>
                        <div class="swiper-button-prev2"></div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        </div>
    </section>

</main>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


<?php get_footer(); ?>

My main.js script:

document.addEventListener('DOMContentLoaded', function() {
    // When you click tab1
    document.getElementById('tab1').addEventListener('click', function() {
        document.querySelector('.A').style.display = 'block';
        document.querySelector('.B').style.display = 'none';
        // document.querySelector('.C').style.display = 'none';
        document.querySelector('#tab1').classList.remove('off');
        document.querySelector('#tab2').classList.remove('on');
        document.querySelector('#tab3').classList.remove('on');
        document.querySelector('#tab1').classList.add('on');
        document.querySelector('#tab2').classList.add('off');
        document.querySelector('#tab3').classList.add('off');
    });

    // When you click tab2
    document.getElementById('tab2').addEventListener('click', function() {
        document.querySelector('.A').style.display = 'none';
        document.querySelector('.B').style.display = 'block';
        // document.querySelector('.C').style.display = 'none';
        document.querySelector('#tab1').classList.remove('on');
        document.querySelector('#tab2').classList.remove('off');
        // document.querySelector('#tab3').classList.remove('on');
        document.querySelector('#tab1').classList.add('off');
        document.querySelector('#tab2').classList.add('on');
        // document.querySelector('#tab3').classList.add('off');
    });


});


document.addEventListener('DOMContentLoaded', function() {

    var swipers = document.querySelectorAll('.swiper-container');

    swipers.forEach(function(swiperContainer) {
        var slideCount = swiperContainer.querySelectorAll('.swiper-slide').length;

        if (slideCount <= 1) {
            swiperContainer.querySelector('.swiper-button-next').style.display = 'none';
            swiperContainer.querySelector('.swiper-button-prev').style.display = 'none';
        }

        new Swiper(swiperContainer, {
            loop: slideCount > 1,
            slidesPerView: 1,
            centeredSlides: false,
            effect: 'fade',
            pagination: {
                el: swiperContainer.querySelector('.swiper-pagination'),
                type: 'fraction',
            },
            fadeEffect: {
                crossFade: true
            },
            navigation: {
                nextEl: swiperContainer.querySelector('.swiper-button-next'),
                prevEl: swiperContainer.querySelector('.swiper-button-prev'),
            },
        });
    });
});

I tried this:

var swipers = document.querySelectorAll('.swiper-container');

but nothing happens.