JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="a1" value="1" class="card"></div>
    <div id="a2" value="2" class="card"></div>
    <div id="a3" value="3" class="card"></div>
    <div id="a4" value="4" class="card"></div>
    <div id="b1" value="5" class="card"></div>
    <div id="b2" value="6" class="card"></div>
    <div id="b3" value="7" class="card"></div>
    <div id="b4" value="8" class="card"></div>
    <div id="c1" value="9" class="card"></div>
    <div id="c2" value="10" class="card"></div>
    <div id="c3" value="11" class="card"></div>
    <div id="c4" value="12" class="card"></div>
    <div id="d1" value="13" class="card"></div>
    <div id="d2" value="14" class="card"></div>
    <div id="d3" value="15" class="card"></div>
    <div id="d4" value="16" class="card"></div>
</div>

CSS

body{
    margin:0;
    padding:0;
}


.container{
    width:418px;
}

.card{
    width:100px;
    height:100px;
    float:left;
    background-color:#ccc;
    margin-bottom:3px;
	margin-right:3px;
}


.card:hover{
    width:94px;
    height:94px;
	border:3px solid black;
}

JavaScript

$(document).ready(function(){

		
	var colors = [
    "1","1","2","2","3","3","4","4",
    "5","5","6","6","7","7","8","8"];
		
	var divs = document.getElementsByClassName("card");
	
	while (divs.length > 0) {
		var i = Math.floor(Math.random() * colors.length);
		divs[0] = colors[i];
		colors.splice(i, 1);
		divs = [].slice.call(divs, 1);
	}
	
var pick1 = false;
var pick2 = false;

$('.card').click(function(){

    if(pick1) {
        pick2 = $(this).attr('value');
        if(pick1 == pick2) alert('Correct');
        else alert('Incorrect');

        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).attr('value');   
    }
});
		
	alert(pick1 + " and " + pick2);



		
});