JQuery: проблема c взаимодействием - срабатывает только первая карточка и при нажатии на другие тоже первая

/*Переварачивание карточки */
$(function () {

    // Checking for CSS 3D transformation support
    $.support.css3d = supportsCSS3D();

    var formContainer = $('#formContainer');

    // Listening for clicks on the ribbon links
    $('.flipLink').click(function (e) {

        // Flipping the forms
        formContainer.toggleClass('flipped');

        // If there is no CSS3 3D support, simply
        // hide the login form (exposing the recover one)
        if (!$.support.css3d) {
            $('#logins').toggle();
        }
        e.preventDefault();
    });

    formContainer.find('form').submit(function (e) {
        // Preventing form submissions. If you implement
        // a backend, you might want to remove this code
        e.preventDefault();
    });


    // A helper function that checks for the 
    // support of the 3D CSS3 transformations.
    function supportsCSS3D() {
        var props = [
            'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
        ], testDom = document.createElement('a');

        for (var i = 0; i < props.length; i++) {
            if (props[i] in testDom.style) {
                return true;
            }
        }

        return false;
    }
});

/*Переварачивание карточки */

/*----------------------------
    Styling the forms
-----------------------------*/


#formContainer {
    width: 500px;
    height: 321px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    border: 2px solid green;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
}

#formContainer form {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    /* Enabling 3d space for the transforms */
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* When the forms are flipped, they will be hidden */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Enabling a smooth animated transition */
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
    transition: 0.8s;

    /* Configure a keyframe animation for Firefox */
    -moz-animation: pulse 2s infinite;

    /* Configure it for Chrome and Safari */
    -webkit-animation: pulse 2s infinite;
}


/* Firefox Keyframe Animation */
@-moz-keyframes pulse {
    0% {
        box-shadow: 0 0 1px #008aff;
    }

    50% {
        box-shadow: 0 0 8px #008aff;
    }

    100% {
        box-shadow: 0 0 1px #008aff;
    }
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 1px #008aff;
    }

    50% {
        box-shadow: 0 0 10px #008aff;
    }

    100% {
        box-shadow: 0 0 1px #008aff;
    }
}

#logins {
    z-index: 100;
}

#loginss {
    z-index: 100;
}

#recover {
    z-index: 1;
    opacity: 0;
    /* Rotating the recover password form by default */
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#formContainer.flipped #logins {
    opacity: 0;
    /**
     * Rotating the login form when the
     * flipped class is added to the container
     */

    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

#formContainer.flipped #recover {
    opacity: 1;
    /* Rotating the recover div into view */
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/*----------------------------
    Inputs, Buttons & Links
-----------------------------*/


#logins .flipLink,
#recover .flipLink {
    background: red;
    /* The blue ribbon links */

    height: 65px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 65px;
}

#recover .flipLink {
    right: auto;
    left: 0;
}

#logins:after {
    /* The "Click here" tooltip */
    width: 98px;
    height: 16px;
    content: '';
    position: absolute;
    right: -120px;
    top: 22px;
}

#loginPass {
    top: 215px;
}

#recoverEmail {
    top: 215px;
}

/*====cards====*/
.main-cards {}

.cards {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.card {
    margin-top: 20px;
    border-radius: 40px;
    cursor: pointer;
    margin-bottom: 50px;

}

.card img {

    margin: 15% auto;
    display: block;
}

.header-crads {
    margin: 5px;
    display: flex;
    justify-content: space-between;
}

.header-crad input {
    height: 20px;

}

.header-crads a {

    background: #BF0830;
    border-radius: 6px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    padding: 10px 40px;
}


/*====cards====*/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cards</title>
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="/style/card.css">
</head>
<header>
    <!-- Navbr -->
    <nav>
        <div class="wapper">
            <div class="container">
                <div class="navbar">
                    <div class="link">
                        <div class="logo"> <img src="img/logo.svg" class="logo__img" alt=""></div>
                        <ul class="menu">
                            <li class="menu__item"><a href="#" class="menu__item-link">About project</a></li>
                            <li class="menu__item"><a href="#" class="menu__item-link">Advertising</a></li>
                            <li class="menu__item"><a href="#" class="menu__item-link">Terms of cooperation</a></li>
                        </ul>
                    </div>
                    <div class="button">
                        <a href="#" class="button__item-book">Registration</a>
                        <a href="#popup" id="login" class="button__item-login popup-link">Login</a>
                    </div>
                    <div class="burger">
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

</header>

<body>
    <section class="main-cards">
        <div class="container">
            <div class="header-crads">
                <input type="text">
                <a class="card-bnt popup-link" href="#popup">+</a>
            </div>
            <div class="cards">
                <div class="card">
                    <div id="formContainer">
                        <form id="logins" method="post" action="./">

                            <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
                            <img src="img/silpo.png" alt="" class="card-img popup-link">
                        </form>
                        <form id="recover" method="post" action="./">
                            <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>

                        </form>
                    </div>
                </div>
                <div class="card">
                    <div id="formContainer">
                        <form id="logins" method="post" action="./">
                            <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
                            <img src="img/silpo.png" alt="" class="card-img popup-link">
                        </form>
                        <form id="recover" method="post" action="./">
                            <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>

                        </form>
                    </div>
                </div>
                <div class="card">
                    <div id="formContainer">
                        <form id="logins" method="post" action="./">
                            <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
                            <img src="img/silpo.png" alt="" class="card-img popup-link">
                        </form>
                        <form id="recover" method="post" action="./">
                            <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>

                        </form>
                    </div>
                </div>
                <div class="card">
                    <div id="formContainer">
                        <form id="logins" method="post" action="./">
                            <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
                            <img src="img/silpo.png" alt="" class="card-img popup-link">
                        </form>
                        <form id="recover" method="post" action="./">
                            <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>

                        </form>
                    </div>
                </div>
            </div>



    </section>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="card.js"></script>

</html>