JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
	<div class="hole" idhole="684" style="width: 346px;">
		<center class="name_hole">GREEN-1/23</center>
		<div class="trap" idtrap="2048"><center class="name_trap">БВ3-1</center></div>
		<div class="trap" idtrap="2049"><center class="name_trap">АВ1-2</center></div>
		<div class="trap" idtrap="2055"><center class="name_trap">АЧ3-2</center></div>
	</div>
	<div class="hole" idhole="685" style="width: 346px;">
		<center class="name_hole">Ерохинская2</center>
		<div class="trap" idtrap="2050"><center class="name_trap">АВ2</center></div>
		<div class="trap" idtrap="2051"><center class="name_trap">БВ3</center></div>
		<div class="trap" idtrap="2057"><center class="name_trap">Pz</center></div>
	</div>
<div class="connect" idconnect="1000" style="transform: rotate(-1.5707963267949rad); top: 180px; left: 57px; width: 43px; display: block;"></div></div>

</body>

CSS

.hole{z-index:2;display:inline-block; vertical-align:top;padding:2px; margin:10px;width:250px;}	
.name_hole{padding:10px;margin-bottom: 15px;font-size:20px;background-color:WhiteSmoke;}
.name_hole:hover{background-color:LightGray}

.trap{z-index:5;display:block;margin-left:30px;margin-right:30px;background-color:WhiteSmoke;}
.name_trap{background-color: WhiteSmoke;z-index:6;padding:10px;margin-bottom: 5px;}
.name_trap:hover{background-color:LightGray}


.connect {top:0;transform-origin:0;z-index:4;background: #DCDCDC;display: none; height: 8px; position: absolute;}
.connect:after {transform-origin:0; content: " "; background:  inherit;display: inherit; margin-top: -3px; width: 30px;height: inherit; transform:rotate(45deg); position: absolute;}
.connect:before  {transform-origin:0;content: " ";background: inherit;display: inherit; margin-top: 3px; width: 30px;height: inherit;transform: rotate(-45deg); position: absolute;}

JavaScript

$(document).ready(function () {
	
	$(".connect")
		.hover( function () {
			
			$("[idtrap=2049],[idtrap=2055]").find(".name_trap").css({"background-color": "LightGray"})
			$("[IdConnect=1000]").css({"background": "#999","height": "14px"}).children().css({"background": "#999","height": "14px"});
		},
		function () {
			
			$("[idtrap=2049],[idtrap=2055]").find(".name_trap").css({"background-color": ""})
			$("[IdConnect=1000]").css({"background": "","height": ""}).children().css({"background": "","height": ""});
		})
		.one("click",edit_connect)
	});
	
	function edit_connect(){
		//
		Id_trap=[2049,2055]
		//
		Id_connect=event.target.getAttribute("IdConnect");
		selector=$(".name_hole,.trap").add(".connect:not([IdConnect="+Id_connect+"])");
		for(i=0;i<Id_trap.length;i++){
			selector=$(selector).not("[idtrap="+Id_trap[i]+"]");
		}
		
		$(selector).slideUp(1000);
		
		}