The button to hide the block - cards does not work JS

There are cards, when you click on the checkmark, the card flies sideways, when you click on the cross, the card turns over to the correct answer. On this side there is a button, when you click on which the card flies to the side, as well as when you click on the checkmark. I have a problem with the last point. How to make it so that when you click on the button with the class next on the back of the card, the active card flies sideways? https://jsfiddle.net/kyen9gsw/

'use strict';

var quizcardContainer = document.querySelector('.quizcard');
var allCards = document.querySelectorAll('.flip-card');
var nope = document.getElementById('nope');
var love = document.getElementById('love');
var next = document.getElementById('next');

function initCards(card, index) {
  var newCards = document.querySelectorAll('.flip-card:not(.removed)');

  newCards.forEach(function (card, index) {
    card.style.zIndex = allCards.length - index;
    card.style.opacity = (10 - index) / 10;
  });
  
  quizcardContainer.classList.add('loaded');
}

initCards();

function createButtonListener(love) {
  return function (event) {
    var cards = document.querySelectorAll('.flip-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, -900px) rotate(0deg)';
    } else if (nope){
      card.classList.toggle('do-flip');
      document.querySelectorAll('next').onclick = function() {
        card.style.transform = 'translate(' + moveOutWidth + 'px, 900px)';
  };
    } 

    initCards();

    event.preventDefault();
  };
}



var nopeListener = createButtonListener(false);
var loveListener = createButtonListener(true);

nope.addEventListener('click', nopeListener);
love.addEventListener('click', loveListener);

 

.quizcard {
  width: 100vw;
  height: 100vh;
  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;
}

.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--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;
}

.flip-card {
  display: inline-block;
  width: 90vw;
  max-width: 400px;
  height: 70vh;
  text-align: center;
  margin: 50px auto;
  position: absolute;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

}
.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flip-card .flip-card-front, .flip-card-back{
  width: 100%;
  height: 100%;
  position: absolute;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  -webkit-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
  -moz-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
  box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
}
.flip-card .flip-card-front {
    background: lightgreen;
    border:1px solid grey;
}
.flip-card .flip-card-back {
    background: lightblue;
    border: 1px solid grey;
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    height: 100%;
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="quizcard">
  <div class="quizcard--cards">
<div class="flip-card">
  <div class="flip-card-front"><p>Front1</p></div>
  <div class="flip-card-back"><p>Back1</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
  <div class="flip-card-front"><p>Front2</p></div>
  <div class="flip-card-back"><p>Back2</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
  <div class="flip-card-front"><p>Front3</p></div>
  <div class="flip-card-back"><p>Back3</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
  <div class="flip-card-front"><p>Front4</p></div>
  <div class="flip-card-back"><p>Back4</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
  <div class="flip-card-front"><p>Front5</p></div>
  <div class="flip-card-back"><p>Back5</p><button class="next">flip</button></div>
</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>