I was trying to create a flipcard with multiple faces but Im not entirely sure how to make the change whenever I click the card. When I'm on the console I can see that the class was added but the face is still the same. I want it to be grey background, Name: Jane, grey background, Name: John. Thats the pattern I am trying to create. I have janeCard and johnCard at the end since I'm not 100% sure how to toggle between them.

Here is the link to my codepen if anyone wants to see. https://codepen.io/heidibonilla/pen/abyRrBg

<section class="card-area">
<div class="card">
  <div class="inner-card jane" id="clicks">
    <div class="front"></div>
  </div>
</div>

// Card will flip on click
const flipCard = document.querySelector('.inner-card');
flipCard.addEventListener('click', function() {
  flipCard.classList.toggle('is-flipped');
})

// Set a var to count the clicks
let clicks = document.getElementById('clicks');
let count = 0;
clicks.onclick = function() {
  count += 1;
  console.log(count);
  if(count % 2 == 0) {
    // show front of card
    console.log('even');
  } else {
    // switch between john or jane
    janeCard.classList.toggle('john');
    console.log('odd');
    console.log(janeCard)

}
}

const janeCard = document.querySelector('.jane');
const johnCard = document.querySelector('.john');

janeCard.innerHTML = `<div class="front">
    </div>
    <div class="back">
      <div class="back-info">
        <h2>Jane Doe</h2>
        <p><strong>Title:</strong> Web Developer</p>
        <p><strong>Email:</strong> example@example.com</p>
        <p><strong>Phone:</strong> (999) 999 - 9999</p>
      </div>
    </div>`


johnCard.innerHTML = `<div class="back">
      <div class="back-info">
        <h2>John Doe</h2>
        <p><strong>Title:</strong> iOS Developer</p>
        <p><strong>Email:</strong> example@example.com</p>
        <p><strong>Phone:</strong> (999) 999 - 9999</p>
      </div>
    </div>`