JSFiddle - React, Tailwind, and code Playground

HTML

<div class="start"></div>
				<div id="a1" class="liczba num q1" data-value="0">20</div>
				<div id="a2" class="liczba num q1" data-value="1">18</div>
				<div id="a3" class="liczba num q1" data-value="1">18</div>
				<div id="a4" class="liczba num q1" data-value="1">18</div>
				
				<div id="a5" class="liczba num q2" data-value="1">9</div>
				<div id="a6" class="liczba num q2" data-value="1">9</div>
				<div id="a7" class="liczba num q2" data-value="1">81</div>
				<div id="a8" class="liczba num q2" data-value="1">9</div>
			
<div id="a9" class="liczba num q3" data-value="0">82</div>
				<div id="a10" class="liczba num q3" data-value="0">80</div>
				<div id="a11" class="liczba num q3" data-value="0">45</div>
				<div id="a12" class="liczba num q3" data-value="1">81</div>

CSS

.num{position: absolute; font-size: 22px; font-family: LULS; z-index: 1; cursor: pointer; width: 40px; height: 40px; border-radius: 50px; padding: 8px 9px;}		
		
		#a1{left: 513px; top: 261px;}
		#a2{left: 622px; top: 333px;}
		#a3{left: 504px; top: 402px;}
		#a4{left: 402px; top: 294px;}

		#a5{left: 621px; top: 238px;}
		#a6{left: 954px; top: 331px;}
		#a7{left: 345px; top: 433px;}
		#a8{left: 300px; top: 200px;}

		#a9{left: 919px; top: 231px;}
		#a10{left: 978px; top: 500px;}
		#a11{left: 330px; top: 490px;}
		#a12{left: 738px; top: 135px;}

		.q2 {display: none;} 
		.q3 {display: none;} 
		.q4 {display: none;} 
		.q5 {display: none;}

JavaScript

$(function()
	{
		var counter = 1;
		//$('.q' + counter).fadeIn;
		$('.liczba').click(function(){
			var x = $(this).data('value');
			if (x == 1) {
				
				$(this).css('background-color', 'green');
				//$('.q').removeClass('liczba');
                //$('.q' + counter).off('click');
                if ($(this).hasClass('q' + counter)) {
                    counter++;
                    $('.q' + counter).fadeIn(1);
                }
			}
			else {
				
				$(this).css('background-color', 'red');
			}
		});
			
	});