JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Grid</title>
        <link rel="stylesheet" href="styles.css">
         <!--[if lte IE9]>
            <link rel="stylesheet" href="css/styles-ie.css">
         <![endif]-->
    </head>
    <body>
        <div id="output">
			<div class="inner"><span>1</span></div>
			<div class="inner"><span>3</span></div>
			<div class="inner"><span>9</span></div>
			<div class="inner"><span>5</span></div>
			<div class="inner"><span>4</span></div>
			<div class="inner"><span>1</span></div>
			<div class="inner"><span>3</span></div>
			<div class="inner"><span>8</span></div>
			<div class="inner"><span>9</span></div>
			<div class="inner"><span>5</span></div>
			<div class="inner"><span>4</span></div>
			<div class="inner"><span>8</span></div>
		</div>
        <script src="scripts.js"></script>
    </body>
</html>

CSS

#output {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 603px;
  margin: 50px auto;
}

.inner {
  display: flex;
  flex-basis: 150px;
  
  height: 80px;
  background: #ccc;
  border: 1px solid gray;
  text-align: center;
}

.inner:hover {
	cursor: pointer;
}

.inner span {
	width: 100%;
	height: 100%;
	
}

JavaScript

let inner = document.querySelectorAll('.inner');
let innerLength = inner.length;
let ar = [];
let arLength = ar.length;
 
  for(let i = 0; i < innerLength; i+=1 ) {

  	let div = inner[i];
    div.children[0].style.opacity = 0;
    

    div.onclick = () => {

    	let span = div.children[0];

  		let opacitySpan = span.style.opacity;
		opacitySpan = 10;
		span.style.opacity = opacitySpan
	
	    if( opacitySpan == 10) {
	    	ar.push(span);
	  	}
	    
		for(let j = 0; j < arLength; j+=1 ) {
	    	
	    	let opacityArElem0 = ar[j].style.opacity;
	    	let opacityArElem1 = ar[j+1].style.opacity;
	       console.log(ar);
	    	if(ar[j] == ar[j+1]) {
	      	opacityArElem0 = 10;
	      	opacityArElem1 = 10;
	    	}
	      else {
	      	opacityArElem0 =  0;
	      	opacityArElem1 = 0;
	      }
	      ar.splice(j)

	    }
    }
  }
//inner.map(inDiv => console.log(inDiv));