JSFiddle - React, Tailwind, and code Playground

HTML

<div class="desk_box_ver" data-rel="218" style="left:93px;top:583px;">I02</div>

<div class="station_info_" id="station_info_218" style="left:93px;top:583px;"><p class="numb">Section:I<br>Station:RETCA230-WS0221<br>Pod:I02</p></div>

CSS

/*body*/
body{
	margin:0px auto;
	width:80%;
	height:80%;
}

/*container for all divs inside*/
#container {
    width:1410px;   
}

/*map size*/
#map_size{
	width:1190px;
	height:1300px;
	background:#0099FF;
	border-style: solid;
	border-color: black;
	position: relative;
	float:left;
}

/*menu bar option*/
#menu_option{
	width:200px;
	height:600px;
	background:#0099FF;
	border-style: solid;
	border-color: black;
	position: relative;
	float:right;
	overflow:hidden;
	text-align:center;
}

#button_position{
	width: 150px;
	height: 80px
	position: absolute;
}

#button_position button{
	font-weigth:bold;    
  font-size:1.3em;
}


button:hover{
  cursor: pointer;
}

button {
    margin:5px auto; 
    font:16px tahoma; /*every size you want.*/
}

/*clear */
.clear {
	clear:both;
}


/*legend*/
#legend{
	width:200px;
	height:300px;
	background:#0099FF;
	border-style: solid;
	border-color: black;
	position: relative;
	float:right;
	overflow:hidden;
	text-align:center;
}

/* desk boxes*/
.desk_box_ver{ 
	width: 18px;
	height: 33px;
}	

.desk_box_hor{ 
	width: 23px;
	height: 10px;
}	

.desk_box_hor, .desk_box_ver { 
	position: absolute; 
	border: 4px solid black; 
	padding:10px;
}

/*station info*/
.station_info_ {
	display: none;
  z-index:100;
	position:absolute;
	background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0px 0px 6px #B2B2B2;
  height: 200px;
  margin-left: 50px;
  width:  275px;
  border:4px solid black;
}

/*close button for station_info*/
.close{
	position: absolute;
  bottom: 0px;
  left: 0px;    
}

.close:hover{
  cursor: pointer;
}

/*section positions*/
#section_a{
	height:265px;
	width:570px;
	border:3px solid yellow;
}

#section_b{
	height:265px;
	width:410px;
	border:3px solid yellow;
}

#section_c{
	height:320px;
	width:260px;
	border:3px solid yellow;
}

#section_d{
	height:320px;
	width:500px;
	border:3px solid yellow;
}

#section_e{
	height:320px;
	width:200px;
	border:3px solid...

JavaScript

//Display station information in a hidden DIV (station_info_) that is toggled with a closing (X) button
						$(document).ready(function() {
   						$(".desk_box_hor").add(".desk_box_ver").click(function() {
    						var id = $(this).attr("data-rel")
      					var st = $("#station_info_"+id).toggle();
       					if (!st.has(".close").length) {
            			st.prepend('<button class="close">X</button>');
       					}//end if
   						});//end click
						});//end ready
						
						//Make the (x) button toggle
						$(document).on("click",".close", function () {
   						$(this).parent().toggle(); 
						});//end click close