Javascript 多卡扩展未按预期工作

我想在一个响应网格视图中显示多张卡，当我们单击一张卡时，它应该展开并用它的图像和卡的详细信息填充整个屏幕，当我们再次单击时，它应该返回网格视图

在我下面给出的代码链接中，它适用于一张卡，但当我输入多张卡时，它不起作用

如何修复此处给出的代码

<div class="wrapper">
        <div class="card">
            <div class="card__cover">
                <div class="header-image">
                    <div class="overlay"></div>
                </div>
                <div class="title-wrap">
                    <h1 class="article-title">Dark House</h1>
                </div>
                <p class="card__cover-exerpt">
                    Lorem ipsum dolor sit amet, consectetur dolores facere, nostrum suscipit modi, necessitatibus nulla sequi, neque quidem vero. <br><br>
                    <span class="social">
                        <i class="fa fa-facecard"></i>
                        <i class="fa fa-twitter"></i>
                        <i class="fa fa-linkedin"></i>
                        <i class="fa fa-instagram"></i>
                    </span>
                </p>
            </div>
            <div class="card__content">
                <p><span class="drop-cap">O</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias est incidunt odit ea adipisci animi nihil voluptates iure beatae explicabo asperiores enim ex placeat itaque minus error temporibus voluptate corporis suscipit commodi voluptatibus praesentium molestiae, perspiciatis nulla. Accusantium harum nisi maiores, velit perferendis, nesciunt ad, porro sequi aliquid maxime molestias!</p>
                
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nobis fuga delectus tempore. Odio ipsa voluptate ex nobis ratione consequatur dignissimos dolorum culpa, ipsam sit dolorem itaque excepturi, natus sed deleniti incidunt ipsum asperiores! Molestiae cumque quam nulla, nam inventore. Necessitatibus blanditiis cumque laboriosam, id, ad unde quo ipsum nulla.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum accusantium velit expedita, minima sapiente unde magnam dicta. Consequuntur cumque numquam sed deserunt, quidem officia illo blanditiis ipsum, commodi distinctio quam molestias dolore, doloremque corporis? Rem ad recusandae delectus accusamus, harum quisquam perferendis dolor aut consectetur nesciunt atque laborum ab dolores.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, neque, magnam. Impedit deleniti ad alias, unde vero quis mollitia, tenetur minima porro, officia iusto quae harum labore nostrum aliquid aut maxime, architecto in reprehenderit. Doloribus pariatur quam fuga sed modi veniam, vel corporis magnam quis eius cumque voluptate, dolore repellendus labore nobis, voluptatibus dicta sapiente doloremque! Enim dicta totam debitis cumque similique, natus, consequatur quidem cum incidunt, sint quos. Ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptatum possimus dolores nesciunt natus quaerat quas quo quam obcaecati ducimus totam quia sint, et nobis nisi tenetur id aspernatur quibusdam molestiae reprehenderit sed incidunt. Voluptas error necessitatibus sed inventore, quasi facilis, est. Asperiores atque laboriosam inventore quis eos nulla. Fuga neque odit maiores facilis voluptas nemo numquam, eos amet molestias.</p>
            </div>
        </div>
  <div class="card">
            <div class="card__cover">
                <div class="header-image">
                    <div class="overlay"></div>
                </div>
                <div class="title-wrap">
                    <h1 class="article-title">Dark House</h1>
                </div>
                <p class="card__cover-exerpt">
                    Lorem ipsum dolor sit amet, consectetur dolores facere, nostrum suscipit modi, necessitatibus nulla sequi, neque quidem vero. <br><br>
                    <span class="social">
                        <i class="fa fa-facecard"></i>
                        <i class="fa fa-twitter"></i>
                        <i class="fa fa-linkedin"></i>
                        <i class="fa fa-instagram"></i>
                    </span>
                </p>
            </div>
            <div class="card__content">
                <p><span class="drop-cap">O</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias est incidunt odit ea adipisci animi nihil voluptates iure beatae explicabo asperiores enim ex placeat itaque minus error temporibus voluptate corporis suscipit commodi voluptatibus praesentium molestiae, perspiciatis nulla. Accusantium harum nisi maiores, velit perferendis, nesciunt ad, porro sequi aliquid maxime molestias!</p>
                
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nobis fuga delectus tempore. Odio ipsa voluptate ex nobis ratione consequatur dignissimos dolorum culpa, ipsam sit dolorem itaque excepturi, natus sed deleniti incidunt ipsum asperiores! Molestiae cumque quam nulla, nam inventore. Necessitatibus blanditiis cumque laboriosam, id, ad unde quo ipsum nulla.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum accusantium velit expedita, minima sapiente unde magnam dicta. Consequuntur cumque numquam sed deserunt, quidem officia illo blanditiis ipsum, commodi distinctio quam molestias dolore, doloremque corporis? Rem ad recusandae delectus accusamus, harum quisquam perferendis dolor aut consectetur nesciunt atque laborum ab dolores.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, neque, magnam. Impedit deleniti ad alias, unde vero quis mollitia, tenetur minima porro, officia iusto quae harum labore nostrum aliquid aut maxime, architecto in reprehenderit. Doloribus pariatur quam fuga sed modi veniam, vel corporis magnam quis eius cumque voluptate, dolore repellendus labore nobis, voluptatibus dicta sapiente doloremque! Enim dicta totam debitis cumque similique, natus, consequatur quidem cum incidunt, sint quos. Ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptatum possimus dolores nesciunt natus quaerat quas quo quam obcaecati ducimus totam quia sint, et nobis nisi tenetur id aspernatur quibusdam molestiae reprehenderit sed incidunt. Voluptas error necessitatibus sed inventore, quasi facilis, est. Asperiores atque laboriosam inventore quis eos nulla. Fuga neque odit maiores facilis voluptas nemo numquam, eos amet molestias.</p>
            </div>
        </div>
</div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        "use strict";
        $('.card').on('click', function () {
        $(this).toggleClass('card--expanded');
        });
    </script>

黑屋

我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是



奥洛雷姆·伊普苏姆·多洛尔·希特（OLorem ipsum Door sit amet），是一位杰出的领袖。在疾病发生之前，动物体内的胎动可能会导致明确的体位异常，减去因胎动前常见的胎动所致的体位异常。我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们

Lorem ipsum dolor sit amet，奉献精英。我是临时代表。我要承认我的罪过，我要承认我的权利，我要承认我的权利，我要承认我的权利！莫莱斯蒂亚·卡姆·奎姆·纳拉，南发明家。布兰迪提斯必要性，身份证，不属于同一身份。

Lorem ipsum dolor sit amet，奉献精英。大耳朵里的小智慧。你的客户是谁，你的工作是什么，你的公司是什么？对于积累的权利，我们必须履行义务和义务，为劳动创造条件

Lorem ipsum dolor sit amet，奉献精英。广告，内克，麦格纳姆。禁止使用其他名称，包括软性设计、小型设计、工艺设计、建筑设计等。我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们！在圣约翰岛，一个类似于宗教的宗教仪式上，我的名言是。Ea

Lorem ipsum dolor sit amet，奉献精英。有条件的财产占有权是一种新的权利，是一种新的权利，是一种新的权利。沃卢帕斯误差必须由发明人、准仪表、est。发明者奎斯·厄斯·努拉。我的脸上长满了皱纹，脸上长满了皱纹

黑屋

我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是，我们的知识是



奥洛雷姆·伊普苏姆·多洛尔·希特（OLorem ipsum Door sit amet），是一位杰出的领袖。在疾病发生之前，动物体内的胎动可能会导致明确的体位异常，减去因胎动前常见的胎动所致的体位异常。我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们

Lorem ipsum dolor sit amet，奉献精英。我是临时代表。我要承认我的罪过，我要承认我的权利，我要承认我的权利，我要承认我的权利！莫莱斯蒂亚·卡姆·奎姆·纳拉，南发明家。布兰迪提斯必要性，身份证，不属于同一身份。

Lorem ipsum dolor sit amet，奉献精英。大耳朵里的小智慧。你的客户是谁，你的工作是什么，你的公司是什么？对于积累的权利，我们必须履行义务和义务，为劳动创造条件

Lorem ipsum dolor sit amet，奉献精英。广告，内克，麦格纳姆。禁止使用其他名称，包括软性设计、小型设计、工艺设计、建筑设计等。我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们！在圣约翰岛，一个类似于宗教的宗教仪式上，我的名言是。Ea

Lorem ipsum dolor sit amet，奉献精英。有条件的财产占有权是一种新的权利，是一种新的权利，是一种新的权利。沃卢帕斯误差必须由发明人、准仪表、est。发明者奎斯·厄斯·努拉。面部按摩
const container = document.querySelector('.wrapper');
for(let i = 0; i < container.children.length; i++) {
  const children = container.children[i];
  children.addEventListener('click', function() {
    children.className = children.className === 'card' ? 'card--expanded' : 'card';
  });
}

.card--expanded {
  height: 100%;
  /* width: 100%; <- this isn't needed */
  overflow-y: scroll;
  flex: 100% 0 0; /* <-- new code */
}