Javascript-форум - Копировать картинку из одного <div> в другой <div>

Доброго времени суток.

Никак не получается скопировать/сдублировать картинку и из одного <div> в другой <div>.

Алгоритм таков:
Дан двумерный массив (15Х3) содержащий картинки;
Надо:
1. по клику на кнопку меню (id="menu") вставить соответствующие картинки в 3 кнопки (<div class="room">) в выпадающем окне (<dialog id = "dial">);
2. по клику на кнопку "room" вставить ту же картинку в <div id="pic">, при этом сама кнопка "room" должна остаться на месте вместе с содержимым.

Вот пункт 2 у меня и не получается. DevTools ошибок не выдает, а "pic" так и остается пустым.

Что я делаю не так ?

<!DOCTYPE html>
 
<html>

  <head>
    <meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
    <title>TT</title>
	<style>
	    #menu{width: 80vw; height: 20vh; border: 1px solid red;}
		.cell{width: 20vw; height: 20vh; border: 1px solid black;}
		#dial{width: 80vw; height: 60vh; border: 1px solid green;}
	    #packaging { width: 70vw; height: 60vh; display: flex; flex-direction: row;}
		#pic{width: 80vw; height: 60vh; border: 1px solid blue;}
		#keypad{ width: 5vw; height: 60vh; border:  display: flex;flex-direction: column;}
		.room {width: 5vw;height: 5vw;border: 1px solid black;}
		#home {width: 5vw;height: 5vw;border: 1px solid black;}
		.fond {width: 5vw;height: 5vw;}
	</style>	
  </head>

  <body>

    <div id="menu">
  	    <button class="cell">1</button><button class="cell">2</button><button class="cell">3</button>
    </div>
	
    <dialog id = "dial">
      <div id="packaging"> 	
		<div id="pic"><img class="fond0" src=""></div>
		<div id="keypad">
		    <div class="room"><img class="fond" src=""></div>
            <div class="room"><img class="fond" src=""></div>
            <div class="room"><img class="fond" src=""></div>    
		</div>	   
      </div>  
	</dialog>
	<script>
	    const inset = [["apricot", "apple", "avocado",],
                       ["butterfly", "bug", "bear"],		   
			           ["crow", "cat", "cup"]];	
					 
		let activeCell;
		let cell = document.querySelectorAll(".cell");
        let dial = document.getElementById("dial");
        let fond = document.querySelectorAll(".fond");
		let fond0 = document.querySelectorAll(".fond0");
        let room =  document.querySelectorAll(".room"); 
		let pic = document.getElementById("pic");

for (let i = 0; i < inset.length; i++){
      cell[i].addEventListener("click", function( ) {
	    activeCell = i;
		dial.show();
		
        for (let j = 0; j < room.length; j++) {
	      fond[j].src = "pic/".concat(inset[activeCell][j].concat(".webp"));          	  
          };
		  
		for (let j = 0; j < room.length; j++) {
	      room[j].addEventListener("click", function( ) {
	      fond0.src = "pic/".concat(inset[activeCell][j].concat(".webp"));      
	         });	       	  
          };
		     
	  }) 
   }; 

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