JSFiddle - React, Tailwind, and code Playground

by Zeljko Tadic

HTML

<ul class="deck">
        <li class="card" data-id="1">
            <i class="fa fa-diamond"></i> diamond
        </li>
        <li class="card" data-id="2">
            <i class="fa fa-paper-plane-o"></i> plane
        </li>
        <li class="card" data-id="2">
            <i class="fa fa-paper-plane-o"></i> test
        </li>
        (16 total list items, 8 of the same time just shuffled around randomly)
    </ul>

JavaScript

var cards = document.querySelectorAll('.card');
cards.forEach(function(card){card.addEventListener('click', handleCardClick);});
var lastClickedId = null;
function handleCardClick() {
  var currentId = this.getAttribute('data-id');
  console.log(currentId, lastClickedId);
  if (!lastClickedId) {
  	lastClickedId = currentId;
    return;
  }
  if (lastClickedId === currentId) {
  	console.log('matcb');
  	lastClickedId = null;
    return;
  }
  lastClickedId = currentId;
}