JSFiddle - React, Tailwind, and code Playground

by Egor

HTML

<section class="container">
		<div class="coral"></div>
		<div class="bisque"></div>
		<div class="coral"></div>
		<div class="bisque"></div>
		<div class="coral"></div>
		<div class="bisque"></div>
		<div class="coral"></div>
		<div class="bisque"></div>
		<div class="coral"></div>
		<div class="bisque"></div>
		<div class="coral"></div>
		<div class="bisque"></div>
		<div class="coral"></div>
		<div class="bisque"></div>
		<div class="coral"></div>
		<div class="bisque"></div>
	</section>

CSS

* {
	margin: 0;
	padding: 0;
}
.container {
	width: 250px;
	margin: 50px auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
div {
	width: 50px;
	height: 50px;
	margin: 5px;
}
.coral {
	background-color: coral;
}

.bisque {
	background-color: bisque;
}

JavaScript

var x = undefined;

$('div').on('click', function(){
  if (x == undefined && $(this).attr('class') == 'coral') {
    $(this).attr('data-name','selected');
    x = $(this).attr('class');
  } else if (x == undefined && $(this).attr('class') == 'bisque') {
    $(this).attr('data-name','selected');
    x = $(this).attr('class');
  } else if (x == 'coral' && $(this).attr('class') == 'coral') {
    $(this).attr('data-name','selected');
    $(document).find('[data-name = selected]').css('display','none')
  	x = undefined;
  } else if (x == 'bisque' && $(this).attr('class') == 'bisque') {
    $(this).attr('data-name','selected');
    $(document).find('[data-name = selected]').css('display','none')
  	x = undefined;
  } else {
  	x = undefined;
  }
  
  console.log(x)
  
});