Html – How can I get the class index of a XML requested object more efficiently (as I am having problems with the current approach)?

The problem I have is a bit more complicated, so I have made a video that shows the behavior I am talking about.

Problem video

As you can see what I want to achieve is to open a photo on a larger size upon clicking on it. As you can see it works … well … kind of.
It behaves kind of weird because it seems to be lagging and not recording the onclick event very well. Sometimes it can record it faster sometimes slower, but not even once would it open the image on a single click as I would want it to. It takes at least two clicks. And I tried the code on a page that has no XML requests and it works on a single click (with a slight delay between the two console log calls though .. around 0.3 sec). And it also works on the chat page if I have a huge delay in refreshing the chat. But I would want to have it work with a single click on a refresh rate of 1 second.

The XML request is the following:

  
     table2 = function(url, callback) 
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (request.readyState == 4 && request.status == 200)
        {
            callback(request.responseText); 
             document.getElementById("scrollchat").innerHTML = this.responseText;
        }
    }; 
    request.open('GET', url);
    request.send();
    
    
}

function mycallback(data) {
   //alert(data);
}

table2('load_chat.php', mycallback);

setInterval(function(){
       table2('load_chat.php', mycallback);
      }, 1700);

The items within the XML request file load_chat.php look like this:

<img src="image1.jpg" class="responsive" onclick="fullimagetry()">
<img src="image2.jpg" class="responsive" onclick="fullimagetry()">
<img src="image3.jpg" class="responsive" onclick="fullimagetry()">
<!-- And the list goes on as more images are being loaded. -->

My JS function that handles this is the following:

function fullimagetry() {

    let photonameval = document.getElementsByClassName('responsive');   
    console.log("click");

document.querySelectorAll('.responsive').forEach((element, index) => {
  element.addEventListener('click', function(event) {
    console.log('Clicked element index:', index, 'Image path:',photonameval[index].src);
    
    const fullPage = document.querySelector('#fullpage');
    
fullPage.style.backgroundImage = 'url(' + photonameval[index].src + ')';
    fullPage.style.display = 'block';
    
  });
});
    

}

Is there a better way to handle this? Maybe modify the fullimagetry() function and make it more efficient, or change something in the XML request itself? As you can see the request is made at 1.7s which is already too slow, but it makes things work at least on a double click. And I would want it to load at 1 second so that the user won’t feel like the server is lagging. Looking forward to your response.

EDIT: I have to specify that I use XML for this because I don’t know any other way to load elements on page without refreshing it. If you could provide me with an alternate way that is more efficient, I am keen to try it. I am still learning, and I go by what I can find on Youtube or W3Schools. Also that 1.7 delay is just set to make the opening of the photo more likely, the lower the value is the more click it needs to open (I know it’s weird).