JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flag japan"></div>
<div class="flag sweden"></div>
<div class="flag japan"></div>
<div class="flag sweden"></div>
<div class="flag england"></div>
<div class="flag usa"></div>
<div class="flag bulgaria"></div>
<div class="flag usa"></div>
<div class="flag russia"></div>
<div class="flag england"></div>
<div class="flag bulgaria"></div>
<div class="flag russia"></div>

CSS

.flag{
  background-color: #ccc;
  display: inline-block;
  width: 95px;
  height: 50px;
  margin: 5px;
}
.japan{
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im0wLDBoOTAwdjYwMGgtOTAweiIvPg0KPGNpcmNsZSBmaWxsPSIjYmUwMDI2IiBjeD0iNDUwIiBjeT0iMzAwIiByPSIxODAiLz4NCjwvc3ZnPg0K');
}
.sweden{
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDEwMDAiPg0KPHBhdGggZmlsbD0iIzBiNTA4OSIgZD0ibTAsMGgxNjAwdjEwMDBoLTE2MDB6Ii8+DQo8ZyBmaWxsPSIjZmZjMTAwIj4NCjxwYXRoIGQ9Im01MDAsMGgyMDB2MTAwMGgtMjAweiIvPg0KPHBhdGggZD0ibTAsNDAwaDE2MDB2MjAwaC0xNjAweiIvPg0KPC9nPg0KPC9zdmc+DQo=');
}
.usa{
  background:...

JavaScript

var flagQueue = [];

function pickFlag(event) { //the event argument gets passed by default
  // event.target signifies the target of the event fired
  flagQueue.push(event.target.className); // push the class string to array
  if (flagQueue.length == 2) { // if it has 2 elements,
    if (flagQueue[0] == flagQueue[1]) { // compare them
      alert('Congratulations');
    } else {
      alert('Try again');
    }
    // whatever happens, reset the flagQueue array
    flagQueue.length = 0;
  }
}

// Now we select all HTML elements with class flag
var flags = document.querySelectorAll('.flag');
// And we add an eventListener to each of them.
for (var i = 0; i < flags.length; i++) {
  flags[i].addEventListener('click', pickFlag);
}