JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Play game!</h1>
<div id="gameboard">
<div class="pic-row1">
<img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-id="programming">
<img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-id="confusedoldman">
<img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-id="santabeatdown">
<img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-id="sparkles">
</div>
<div class="pic-row2">
<img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-id="santabeatdown">
<img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" data-id="pizzalover">
<img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-id="fishbowling">
<img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" data-id="monkeys">
</div>
<div class="pic-row3">
<img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-id="fishbowling">
<img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-id="confusedoldman">
<img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-id="sparkles">
<img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" data-id="redpanda">
</div>
<div class="pic-row4">
<img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-id="programming">
<img src="redpanda.jpeg"...
JavaScript
var firstClicked = [];
var indices = [];
$(document).ready(function() {
$(".pictures").click(function() {
var id = $(this).data('id');
var index = $(this).index();
if ((indices.indexOf(index) == -1) && (firstClicked.indexOf(id) !== -1)) {
$('*[data-id="' + id + '"]').hide();
firstClicked = [];
indices = [];
} else {
firstClicked.push(id);
indices.push(index);
}
});
});