Javascript-форум - открыть div и применить draggble

Добрый, не смог разобраться, нужно открыть более двух ДИВ объектов и перемещать их по странице, в отдельности скрипты работают, а вместе нет, как их связать не знаю.
Предоставляю весь код, заранее сори, если грубо написано. Заранее спасибо.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
</head>
<body>	



<style>
		#elem1{
		display:none;
		width:100px;
		height:100px;
		border:1px solid red;
		}
		
		#elem2{
		display:none;
		width:100px;
		height:100px;
		border:1px solid red;
		}
		
		#elem3{
		display:none;
		width:100px;
		height:100px;
		border:1px solid red;
		}
			
		#elem1.active{
		display:block;
		width:33px;
		height:33px;
		position:absolute;
		top:10;
		background-color:red;
		margin:1, 1, 1;
		border:1px solid red;
		z-index:1;
		}
		
		#elem2.active{
		display:block;
		width:33px;
		height:33px;
		position:absolute;
		top:10;
		background-color:yellow;
		margin:1, 1, 1;
		border:1px solid red;
		z-index:2;		
		}
		
		#elem3.active{
		display:block;
		width:33px;
		height:33px;
		position:absolute;
		top:10;
		background-color:green;
		margin:1px, 1, 100;
		border:1px solid red;
		z-index:3;
		}
		
		#b{
		position:fixed;
		displey:block;
		}
		
		button{
		display:block;
		}
		
		#s{
		border:1px solid black;
		width:100px;
		height:100px;
		float:right;
		position:relative;
		}
		
		.left{
			position:fixed;
			left:0px;
			top:0px;
			float:left;
			}
		
</style>


	<div id="s">
	
		<div id="elem1"   draggable="true">  1hghgg</div>
		<div id="elem2"   draggable="true">  2ghghh</div>
		<div id="elem3"   draggable="true">  3ghghgh</div>
	</div>


	<div id="b" class="left">
	
		<button id="button">отк/закр1</button>
		<button id="button1">отк/закр2</button>
		<button id="button2">отк/закр3</button>
	</div>


 [js]
<script>			


			let button = document.querySelector('#button');
			let elem1 =   document.querySelector('#elem1');
			
			let button1 = document.querySelector("#button1");
			let elem2 =   document.querySelector("#elem2");
			
			let button2 = document.querySelector("#button2");
			let elem3 =   document.querySelector("#elem3");
			
			
			
			
			
		*!*	
		let offset1X;
		let offset1Y;
		button.addEventListener('click', func1);
				
		function func1(){
			
		elem1.classList.toggle("active");
		
		}
			elem1.classList.toggle("active");
	
		elem1.addEventListener("dragstart",function(event){
		offset1X = event.offset1X;
		offset1Y = event.offset1Y;
		
		});
		elem1.addEventListener("dragend",function(event){
		
		elem1.style.top = (event.pageY-offset1Y)+"px";
		elem1.style.left = (event.pageX-offset1X)+"px";
		console.log(event.pageX, event.pageY);
		
		});
                */!*

				
			
			
			button1.addEventListener('click', func2);
			function func2(){
				console.log("999");
			elem2.classList.toggle("active");
			console.log(777);
			}
			
			button2.addEventListener('click', func3);
			function func3(){
				console.log("999");
			elem3.classList.toggle("active");
			console.log(777);
			}
			
</script>


</body>

</html>