JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxesCon" id="a">
    <div class="activeBox" forLine="1"></div>
	
    <div class="box" id="1" line="1" user-id="1234">
	<p>name: a</p>
    </div>    
    
    <div class="box" id="2" line="1" user-id="5678">
	<p>name: b</p>
    </div>  
    
    <div class="box" id="3" line="1" user-id="91011">
	<p>name: c</p>
    </div>  
	
	<div class="activeBox" forLine="2"></div>
	
	<div class="box" id="4" line="2" user-id="121314">
	<p>name: d</p>
    </div>    
    
    <div class="box" id="5" line="2" user-id="151617">
	<p>name: e</p>
    </div>  
    
    <div class="box" id="6" line="2" user-id="181920">
	<p>name: f</p>
    </div>  
    
</div>

CSS

div.box {
    width: 150px;
    height: 250px;
    padding: 10px;
    border: 2px solid gray;
    margin: 0px;
	margin-bottom: 2px;
    display: inline-block;
	background-color: rgb(255, 255, 255);
}
div.boxesCon {
    width: 530px;
}

.activeBox {
	width: 100%px;
	border: 2px solid gray;
	border-bottom-color: rgb(245, 245, 220);
	background-color: rgb(245, 245, 220);
	display: none;
}

JavaScript

$(document).ready(function() {
    $(".box").click(function(event) { // click on box
		var clickedBoxID = (event.target.id);
		var line = $( "#" + clickedBoxID ).attr( "line" )
		
		if($( "#" + clickedBoxID ).css( "background-color" ) === "rgb(255, 255, 255)") { // if the element not clicked before
			$( ".activeBox" ).each(function() { // hide all "activeBox" div
				$( this ).css( "display", "none" );
			});
			
			$( ".box" ).css( "background-color", "rgb(255, 255, 255)" ); // all other boxes
			$( ".box" ).css( "border-top-color", "rgb(128, 128, 128)" ); // all other boxes
			$( "#" + clickedBoxID ).css( "background-color", "rgb(245, 245, 220)" );
			$( "#" + clickedBoxID ).css( "border-top-color", "rgb(245, 245, 220)" );
			
			$( '.activeBox[forLine="'+line+'"]' ).css( "display", "block" ); // display the "#activeBox" div
			var clickedBoxIDCON = $( "#" + clickedBoxID ).html();
			var userID = $( "#" + clickedBoxID ).attr("user-id");
			$( '.activeBox[forLine="'+line+'"]' ).html('<img id="exitIcon" src="https://cdn1.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style="float: right;" />' + clickedBoxIDCON + "<br /><li>user ID: " + userID +" </li><br /><li>picture:</li><br /><li>age:</li><br /><li>adress:</li><br />" );
			
			
		} else { //if the element clicked before
			$( '.activeBox[forLine="'+line+'"]' ).css( "display", "none" ); // hide the "#activeBox" div
			$( '.activeBox[forLine="'+line+'"]' ).html(""); // clear the "#activeBox" div
			
			$( "#" + clickedBoxID ).css( "background-color", "rgb(255, 255, 255)" );
			$( "#" + clickedBoxID ).css( "border-top-color", "rgb(128, 128, 128)" );
		}
		
    });
	
	$( ".activeBox" ).on('click', "#exitIcon", function() { // click on exit icon
		$( ".activeBox" ).each(function() { // hide all "activeBox" div
				$( this ).css( "display", "none" );
			});
		$( ".box" ).css( "border-top-color", "rgb(128, 128, 128)" ); // all other boxes	
		$( ".box" ).css( "background-color", "rgb(255, 255, 255)"...