JSFiddle - React, Tailwind, and code Playground

HTML

<content>
			
	

<div align="center">
	<div id="page-wrap">
  <section class="persist-area">
<h2 class="persist-header">Counter <span class="selected"></span>/10</h2>


<span class="array"></span>




<div id="container">

   <div class="box" id="1"></div>
   <div class="box" id="2"></div>
   <div class="box" id="3"></div>
   <div class="box" id="4"></div>
   <div class="box" id="5"></div>
   <div class="box" id="6"></div>
   <div class="box" id="7"></div>
   <div class="box" id="8"></div>
   <div class="box" id="9"></div>
   <div class="box" id="10"></div>
   <div class="box" id="11"></div>
   <div class="box" id="12"></div>
</div>
                
 </section>
 </div>
 </div>
</div>
<br />
<br />
<br />
<br />
<br />
  




                         

					</content>
					
				</article>

CSS

.top10full {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;	
padding: 3% 0%;
margin-bottom: 2%;
width: 100%;
float:left;

}
 
/* position the box container */
#aroundbox{
text-align:center;
margin-top:5em;
width:100%;
}

/* selection box initial properties */
.box{
width:100%;
height:30px;
line-height:30px;
background-color:#f5f5f5;
margin-top: 2px;
display:inline-block;
z-index:1;
border-color: #666;
text-align:left;

	
}

/* selection box initial image properties */
.box img{
visibility:hidden;
height:20px;
width:20px;
z-index:501;
-webkit-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
-moz-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
-o-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 

}


/* where text is displayed in the selection box */
.box span {
display: inline-block;
vertical-align: middle;
line-height: normal; 
}

/* On hover, we make that box stand higher than all the rest so that our box shadow displays on all four edges, add a border and a nice transition to make things smooth */
.box:hover{
z-index:500;
cursor: pointer;
border-color: #34b8f4;
-webkit-box-shadow: 0px 0px 21px 0px #34b8f4;
-moz-box-shadow: 0px 0px 21px 0px #34b8f4;
box-shadow: 0px 0px 21px 0px #34b8f4;
-webkit-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
-moz-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
-o-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
}

/* This is a class we add/remove to boxes when clicked, it just makes the background green and has a nice smooth transition */
.green{
background-color:#2CA01C;
color:#ffffff;
z-index:501;
-webkit-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
-moz-transition: all 500ms cubic-bezier(0.465, 0.765, 0.485, 0.780); 
-o-transition:...

JavaScript

var selected = [];

$(".selected").text(selected.length) == 0;

$( ".box" ).click(function() {
  /* $( this ).append( "<img class='boximg' src='images/icons/checkmark.png' />").toggleClass( "green" ); */
  $(this).toggleClass('green');
  var id = $(this).attr('id')

  if( selected.indexOf(id) <= -1 ) {						
    selected.push(id);	
  } else {			
	selected.splice( selected.indexOf(id), 1);
  }
   console.log(selected.length);
   /* If count is 10, display max already selected code */
   if( selected.length > 10 ) {
	$( this ).removeClass('green').html('<div class="red"><span>You have already selected 10!</span></div>').delay(3000);
    $('.red').fadeOut(1000);
       selected.splice(selected.indexOf(id),1);
	/* Display the number of items selected */
   } else {
	$(".selected").text(selected.length)
	$(".array").text(selected)
	console.log(selected)
  }
});