I need help switching my Big Image into the image on the thumbnail based on click event

HTML

CSS

#pane{

display: grid;

justify-content: center;

}

#thumbnailPane{

display: grid;

justify-content: center;

grid-template-areas:

'PandaBox0 PandaBox1 PandaBox2 PandaBox3 ';

}

#PandaBox0{

grid-area: PandaBox0;

}

#PandaBox1{

grid-area: PandaBox1;

}

#PandaBox2{

grid-area: PandaBox2;

}

#PandaBox3{

grid-area: PandaBox3;

}

Javascripts

PandaArray = ["1Panda.jfif",

"2Panda.jpg",

"3Panda.jpg",

"4Panda.webp"]

BabyPandaArray = ["1BabyPanda.jpg",

"2BabyPanda.jpg",

"3BabyPanda.jpg",

"4BabyPanda.png"]

window.addEventListener('load',LoadImages)

function LoadImages() {

var mainImage = document.createElement("img")

mainImage.src = "images/" + PandaArray[0]

document.getElementById("pane").appendChild(mainImage);

mainImage.setAttribute('id',"MainPandaBox")

mainImageID = document.getElementById("MainPandaBox")

for(i=0; i

var thumbnailImages = document.createElement('img')

thumbnailImages.src = "images/" + PandaArray[i]

document.getElementById("thumbnailPane").appendChild(thumbnailImages);

thumbnailImages.style.height = '100px'

thumbnailImages.setAttribute('id',"PandaBox" + i)

thumbnailImages.setAttribute('class',"ThumbnailBox" + i)

}

mainImageID.addEventListener('click', function(e){

console.log("iwasclicked")

let imgTarget = e.target;

mainImageID.src = imgTarget;

})

}