Hi, I have problem i don't have idea on how to put the image in a div with an id of "zooomout" when i click on the picture.

can you help me please how to do this.

Code:
<!DOCTYPE html>

<html>
  
  <head>
    <meta charset="utf-8"/>
	
	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  }
	 
	  ul img{
	    width: 80px;
	  }
	  
	  #bodycontainer{
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid blue;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0.7;
	    display: none;
	  }
	 
	  
	  #zoomout{
	    position: relative;
		left:  300px;
		bottom: 300px;
		width: 250px;
		height: 250px;
		border: 1px solid red;
		display: none;
		z-index: 100px;
	  }
	  
	  #pic{
	     
	     
	  }
	
	</style>
	
  </head>
  
   <body>
   
	    <div class="rembull">
		   <ul id="pic">
			   <li><img src="image/pic-1.jpg"/></li>
			   <li><img src="image/pic-2.jpg"/></li>
			   <li><img src="image/pic-3.jpg"/></li>
			   <li><img src="image/pic-4.jpg"/></li>
		   </ul>
		<div>
    
		<div id="bodycontainer"> 
			
	    </div>
		
		<div id="zoomout">
			
		</div>
	   
	 
	 <script>
	 
		 var pic, items,zoom;
	     var bodycont;
		 pic = document.getElementById("pic");
		 items = pic.getElementsByTagName("li");
		 console.log(items);
	     console.log(document.getElementById("pic"));
		
	     var i=0;
		 var itemslen;
		 
			
		
		pic.addEventListener("click",function(e){
			 
			 if(e.target.tagName === "IMG")
			    {
				  bodycont =  document.getElementById("bodycontainer"); 
				  zoom  =  document.getElementById("zoomout"); 
				  
				  bodycont.style.display="block";
				  zoom.style.display="block";
				  
				
				}
		});
	
			
	   

	 </script>
	 
   </body>
</html>