I'm working with an API in JS to create a movie info website and I'm calling an async function 3 times that fetches different endpoints based on the parameters I pass in.

I mapped across each object(value) in the 'result'(property of parsed response) array in order to set it's respective 'poster-path' property value as the respective image element's src attribute. it worked fine, but since i called the function thrice, anytime I try to target the object whose index is equal to that of my target image element, it seems to target only the objects gotten in the final function call.

    let result = res.json().result
    let imageID = e.target.data-id;
    let targetObject = result[imageID];

if I try to access targetObject's movie ID property for example, and the e.target is the image with an index of 0 in the first movie display(result of the first function call), rather than targetting the targetObject with an index of 0 in the same first movie display, it will target the object with an index of 0 in the third movie display.

Please how do I target the object with the same index as my e.target and in the 'same' display without it being overridden by the last. I'm very sorry if I didn't word this correctly, I'm still new to programming.