I have two DIVs on the left are thumbnail images and on the right I have one image. I am trying to click an image on the left side and have it replace the image on the right side. Currently when I select a thumbnail image I get the swirly indicator that the function has been called but the image isn't updated. Can this be completed with normal javascript or should JQuery be used.

<script type="text/javascript">
        
    //  This function will display photos selected by user
     function showDirectory(){
         var myFiles = document.getElementById("files");
         for(var i=0;i<=myFiles.files.length; i++){
            var x = myFiles.files[i].name;
            document.getElementById("demo1").innerHTML += "<img onclick='switchImage("+x+")' src='"+x+"' style='width:40px; height:40px; margin:5px'>"
         }
     }
            
    function switchImage(e){
       document.getElementById("rightside").src=e;
    }
</script>

Show files in the Directory

    <div class="item" style="width: 70%; background-color: bisque; padding: 5px;">
       <img id="rightside" src="RightSide.jpg" alt="Picture of " style="height: 720px; width:720px">
        <p  style="color: #000; text-align: right;">Slide1.jpg</p>
    </div>
</div>