When i click on an image, the popup does not seem to work, and there are no error messages as well. I searched google for examples but it doesnt work.

Here is my javascript code:

function eventHandlers(){
$(".img-thumbnail").click(togglePopup);}
function togglePopup(e){
var popup = document.getElementById("id_popup");

if (popup === null)
{
    
    popup = document.createElement("span");
    popup.id = id_popup;
    popup.setAttribute("class","image-popup");
    
    var thumbnail = e.target;
    var small_image = thumbnail.src;
    var large_image = small_image.replace("_small","_large");
    popup.innerHTML = '<img src=' + large_image + '>';
    
    thumbnail.insertAdjacentElement("afterend",popup);
} else
{
    $('#' + id_popup).remove();
}}

Code in the main file:

<figure>                 
     <img src="images/test.jpg" class="img-thumbnail" alt="Test" title="View larger image..."/>
     <span id="id_popup"
                    <span id="id_popup" class="image-popup"></span>
                    <figcaption>Standard Test</figcaption>
 </figure>

And my css code:

.image-popup {
border: 5px solid lightgrey;
margin-left: 25%;
margin-top: -60%;
height: 40vh;}

Additionally is there a way that i can modify my javascript file to allow the popup to close when clicked anywhere on the screen?

Help will be really appreciated. Thanks.