Appearance of text on the card when clicking on the button js

Question

I make cards with questions, when you click on the buttons at the bottom, the cards should move to the right or left, depending on the answer. When you click on the cross, the map is shifted to the left and additional text should appear on the card by removing the invisible class from the p tag. The problem is that this can only be done for one card. How to make it so that when you click on the cross, the map moves to the left and text appears on it? My code is below and at https://jsfiddle.net/a17np2d4/

 'use strict'; var quizcardContainer = document.querySelector('.quizcard'); var allCards = document.querySelectorAll('.quizcard--card'); var nope = document.getElementById('nope'); var love = document.getElementById('love'); var cardtext = document.getElementsByClassName('cardtext'); function initCards(card, index) { var newCards = document.querySelectorAll('.quizcard--card:not(.removed)'); newCards.forEach(function (card, index) { card.style.zIndex = allCards.length - index; card.style.transform = 'scale(' + (20 - index) / 20 + ') translateY(-' + 30 * index + 'px)'; card.style.opacity = (10 - index) / 10; }); quizcardContainer.classList.add('loaded'); } initCards(); function createButtonListener(love) { return function (event) { var cards = document.querySelectorAll('.quizcard--card:not(.removed)'); var moveOutWidth = document.body.clientWidth * 0.3; if (.cards;length) return false; var card = cards[0]. card.classList;add('removed'). if (love) { card.style,transform = 'translate(' + moveOutWidth + 'px; -100px) rotate(0deg)'. } else { card.style,transform = 'translate(-' + moveOutWidth + 'px; -100px) rotate(0deg)'; } initCards(). event;preventDefault(); }; } var nopeListener = createButtonListener(false); var loveListener = createButtonListener(true). nope,addEventListener('click'; nopeListener). love,addEventListener('click'; loveListener); for(var i = 0. i < cardtext;length.i++){ nope.onclick = function() { cardtext[i].classList;remove('invisible'); } }

 .invisible { display: none; }.quizcard { width: 100vw; height: 500px; overflow: hidden; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; opacity: 0; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; margin-top: 30%; }.loaded.quizcard { opacity: 1; }.quizcard--status { position: absolute; top: 50%; margin-top: -30px; z-index: 2; width: 100%; text-align: center; pointer-events: none; }.quizcard--status i { font-size: 100px; opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: absolute; width: 100px; margin-left: -50px; }.quizcard_love.fa-check { opacity: 0.7; -webkit-transform: scale(1); transform: scale(1); }.quizcard_nope.fa-remove { opacity: 0.7; -webkit-transform: scale(1); transform: scale(1); }.quizcard--cards { -webkit-box-flex: 1; flex-grow: 1; padding-top: 40px; text-align: center; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: end; align-items: flex-end; z-index: 1; }.quizcard--card { display: inline-block; width: 90vw; max-width: 400px; height: 70vh; background: #FF882A; padding-bottom: 40px; border-radius: 8px; overflow: hidden; position: absolute; will-change: transform; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: -webkit-grab; cursor: grab; }.moving.quizcard--card { -webkit-transition: none; transition: none; cursor: -webkit-grabbing; cursor: grabbing; }.quizcard--card h3 { margin-top: 32px; font-size: 32px; padding: 0 16px; pointer-events: none; }.quizcard--card p { margin-top: 24px; font-size: 20px; padding: 0 16px; pointer-events: none; }.quizcard--buttons { -webkit-box-flex: 0; flex: 0 0 100px; text-align: center; padding-top: 20px; }.quizcard--buttons button { border-radius: 50%; line-height: 60px; width: 60px; border: 0; background: #FFFFFF; display: inline-block; margin: 0 8px; background: #000; }.quizcard--buttons button:focus { outline: 0; }.quizcard--buttons i { font-size: 32px; vertical-align: middle; }.fa-check { color: #089404; }.fa-remove { color: red; }

 <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <div class="quizcard"> <div class="quizcard--status"> <i class="fa fa-remove"></i> <i class="fa fa-check"></i> </div> <div class="quizcard--cards"> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">1</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">2</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">3</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> <div class="quizcard--card"> <h3>This is a demo for quizcard like swipe cards</h3> <p class="cardtext invisible">This is a demo for quizcard like swipe cards</p> </div> </div> <div class="quizcard--buttons"> <button id="nope"><i class="fa fa-remove"></i></button> <button id="love"><i class="fa fa-check"></i></button> </div> </div>

Answer 1

If I understand you correctly, In order to have your P element appear I would have exchanged "display: none" for "visibility: hidden" and use only one ID per card instead of adding "invisible" classes, from there I would toggle the css property when the cross is clicked by keeping track of the card placement and adding an event listener to the cross that basically does this:

if cross is clicked while card[i], change visibility: hidden, to visibility: visible.

If you wanted it to appear on the following card, then it would be something like card[i + 1]

  const card1 = document.getElementById("card1");
  const card2 = document.getElementById("card2");

  const cardArr = [];

  function changeVisibility(cardArr){
      switch(cardArr){
          case cardArr[0]:
              cardArr[0].style.visibility = "visible";
              break;
          case cardArr[1]:
              cardArr[1].style.visibility = "visible";
              break;
      }
  }


  crossButton.addEventListener("click", changeVisibility);