<div class='game'>
  <div class='card' data-card='5'>5</div>
  <div class='card' data-card='3'>3</div>
  <div class='card' data-card='5'>5</div>
  <div class='card' data-card='1'>1</div>
  <div class='card' data-card='3'>3</div>
  <div class='card' data-card='1'>1</div>
</div>
.card {
  display: inline-block;
  padding: 20px;
  border: 1px solid;
  margin: 5px;
  color: white;
  border-color: black;
}

.flip {
  color: black;
}
document.querySelector('.game').addEventListener('click', function(ev) {
  const div = ev.target;
  if (div.classList.contains('card')) {
    div.classList.toggle('flip');
    
    const matchingCard = document.querySelector('...');
    if (matchingCard) {
      matchingCard.classList.toggle('flip');
    }
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.