JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="items">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
	</div>

</body>

CSS

.items{
	display: flex;
	flex-wrap: wrap;
}

.items .item{
	background-color: #ddd;
	width: 100px;
	height: 100px;
	margin: 10px;
	padding: 10px;
	border: 4px solid transparent;
	transition: border-color 0.5s;
}

.items .item-active{
	border: 4px solid #0cf;	
}

JavaScript

makeCounter = function(){
		var count = 1;	
		return function(){
			return (count++) % 10 ;
		};
	};
  
  
var elemList = document.querySelectorAll('.items .item');

	for(var i = 0; i < elemList.length; i++){
		elemList[i].onclick = setClass;	
		elemList[i].Counter = makeCounter();
		elemList[i].num = elemList[i].innerHTML;
	}


  function setClass(){
		this.classList.toggle("item-active");
		this.innerHTML = this.num + ' Число нажатий на этот div: '  + this.Counter();
	}