使用相同的 JavaScript 代码打开两个以上的弹出窗口时出现问题

Question

I'm making like a movie information cards, the problem is when I try to open the popups cards it only opens the first one I tried many solution I've find in this website but it still doesn't work, note that am a novice in JavaScript I faced issues while using for loop to open the popups cards one by one

Here is my code

(I use also Bootstrap)

links:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

here ismy CSS:

<style>
    .aaa {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
        z-index: 1;
    }

    .popup-content {
        position: relative;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #13060d;
        padding: 1rem 1.5rem;
        width: 65%;
        height: 80%;
        border-radius: 0.5rem;
    }

    .close-button {
        float: right;
        width: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 0.25rem;
        background-color: deepskyblue;
    }

    .close-button:hover {
        background-color: darkgray;
    }

    .show-popup {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    }


    #popup {
        color: #ffffff;
    }



    #popup #film-title h1 {
        text-align: center;
    }



    #popup #film-discription-popup p {

        margin-left: 10% !important;
        margin-right: 10% !important;
        text-align: center;
        word-wrap: break-word;
        font-size: 18px;
    }

    #popup #watch-btn {

        margin-bottom: 30px !important;
    }

    #popup #watch-btn #watch-later-btn {
        margin-left: 50px !important;
    }

    #popup #film-info img {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 70%;
    }

    #popup #film-info #info li {

        margin-top: 0px !important;
        padding: 0;
        line-height: 2;
    }

    #popup #film-info #info span {

        margin-left: 10px !important;
    }

    #popup #film-info #info b {

        margin-left: 10px !important;
        font-size: 19px;
    }

    #popup #film-info #info li {
        color: #ffffff;
        display: block;
        font-size: 16px;
        text-align: center
    }

    #popup #film-info #info li span:hover {
        color: #3897f0;
    }
    
   
    .img-fluid {
        height: 300px;
        width: 300px;
    }
</style>

Here is my HTML

<div class="row">
    <div class="col-lg-12 ">
        <img class="img-fluid trigger" src="https://freeclassicimages.com/images/18-Weapons-Of-Kung-Fu-01-movie-poster.jpg">
        <div class="aaa">
            <div class="popup-content">
                <span class="close-button">&times;</span>
                <div class="row" id="popup">
                    <div class="col-lg-8">
                        <div class="row">


                            <div class="col-lg-12" id="film-title">
                                <h1> <b>Film title</b></h1>
                            </div>
                            <div class="col-lg-12" id="film-discription-popup">



                                <p>4.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrrgggtttttttttttttttttttttfrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5</p>

                            </div>
                            <div class="col-lg-12" id="watch-btn">
                                <button class="btn-primary btn-lg" id="watch-now-btn">Watch now</button>
                                <button class="btn-primary btn-lg" id="watch-later-btn">Watch latter</button>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-4" id="film-info">
                        <img src="https://freeclassicimages.com/images/18-Weapons-Of-Kung-Fu-01-movie-poster.jpg">
                        <ul id="info">
                            <li><b>Genre</b><span>action,triller</span></li>
                            <li><b>languague</b><span>spanish</span></li>
                            <li><b>country</b><span>algeria</span></li>
                            <li><b>min age</b><span>-12</span></li>
                            <li><b>rating</b><span>4.4☆</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12  ">
            <img class="img-fluid trigger" src="https://freeclassicimages.com/images/13-rue-madeleine-1946-movie-poster.jpg" >
            <div class="aaa">
                <div class="popup-content">
                    <span class="close-button">&times;</span>
                    <div class="row" id="popup">
                        <div class="col-lg-8">
                            <div class="row">

                                <div class="col-lg-12" id="film-title">
                                    <h1> <b>Film title</b></h1>
                                </div>
                                <div class="col-lg-12" id="film-discription-popup">
                                    <p>4.rffffffffffffffffrfrfrheffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrrgggtttttttttttttttttttttfrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5.rffffffffffffffffrfrfrheuhduehdyehdyhedyh5</p>

                                </div>
                                <div class="col-lg-12" id="watch-btn">
                                    <button class="btn-primary btn-lg" id="watch-now-btn">Watch now</button>
                                    <button class="btn-primary btn-lg" id="watch-later-btn">Watch latter</button>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-4" id="film-info">
                            <img src="https://freeclassicimages.com/images/13-rue-madeleine-1946-movie-poster.jpg">
                            <ul id="info">
                                <li><b>Genre</b><span>action,triller</span></li>
                                <li><b>languague</b><span>spanish</span></li>
                                <li><b>country</b><span>algeria</span></li>
                                <li><b>min age</b><span>-12</span></li>
                                <li><b>rating</b><span>4.4☆</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>






        </div>

    </div>

Here is the JavaScript links:

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Here is the script:

    <script>
        var modal = document.querySelector(".aaa");

        var closeButton = document.querySelector(".close-button");
        var triggers = document.querySelectorAll(".trigger");


        function toggleModal() {
            modal.classList.toggle("show-popup");
        }

        function windowOnClick(event) {
            if (event.target === modal) {
                toggleModal();
            }
        }
        for (var i = 0; i < triggers.length; i++) {
            triggers[i].addEventListener("click", toggleModal);
        }
        closeButton.addEventListener("click", toggleModal);
        window.addEventListener("click", windowOnClick);
    </script>

Answer 1

here is a link to better the understanding copy and paste the link

link : codepen.io/moo2000/pen/OJXrjxm

ps(try to make full screen )[to make full screen click in that button]

: https://i.stack.imgur.com/plsXf.png