title: Flip animation for multiple cards
body: <p>I have four cards laid out in grid that I want to animate. I have successfully been able to animate 1 of them but when I try to add more of the animation javascript for the other cards not only do those cards not animate, but the first card that had successfully animated before no longer flips.</p>
  <p>Here is the css for the card element:</p>
  <pre><code>.card-1-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  
  .card-1-inner.is-flipped {
    transform: rotateY(180deg);
  }
  </code></pre>
  <p>Here is the javascript:</p>
  <pre><code>const card = document.querySelector('.card-1-inner');
  
  card.addEventListener('click', function () {
      card.classList.toggle('is-flipped');
  });
  </code></pre>
  <p>When I try adding additional &quot;const card&quot; for .card-2-inner through .card-4-inner all flip animation breaks. I am very inexperienced, even more so with javascript.</p>