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;
  
}

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

JavaScript

let inner = document.querySelectorAll('.inner span');
let ar = [];
let arLength = ar.length;
  
  for(let i in inner) {

  	let span = inner[i];
  	span.style.opacity = 0;
    
    inner[i].onclick = e => {
      let opacitySpan = e.target.style.opacity;
      opacitySpan = 10;
   
      if( opacitySpan == 10) {
        ar.push(e.target);
      }
    }

    for(let i = 0; i < arLength; i+=1 ) {
    	
    	let opacityArElem = ar[i].style.opacity;
    	if(ar[i] = ar[i+1]) {
      	opacityArElem = 10;
      	opacityArElem = 10;
    	}
      else {
      	opacityArElem =  0;
      	opacityArElem = 0;
      }
      arr.splice(i)

    }

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