Prepending Old Chat Messages to Chat Box

I'm trying to prepend old messages to a chatbox when the user scrolls to the top. I'm using eventListeners as the code illustrates, but I'm running into an error where only the last chatbox is working properly. It seems that bodies[index].scrollTop and bodies[index].scrollHeight always returns 0 with the exception of bodies[lastIndex]. Why might this be? (logging bodies[index] correctly returns the div element)

document.querySelectorAll('.popup-messages').forEach((item, index) =>
{   
    item.addEventListener('scroll', async function()
    {
        if (chatReady[index] == true && bodies[index].scrollTop == 0)
        {
            chatReady[index] = false;
            var previousHeight = bodies[index].scrollHeight;
                    
            await getMessages(item.id.replace(":body", ""));
                    
            var heightDiff = bodies[index].scrollHeight - previousHeight;
            bodies[index].scrollTop += heightDiff;
        }
    })
})

Edit: If there's a different way to make multiple eventListeners dynamically, please share it with me as it would help a lot.