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

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>