How to get external function work in addEventListener for loop

I have two click methods, which do the same thing, so I created an external function. But external function doesn't know what 'i' is. How can I make it work? Passing 'i' as argument doesn't work.

const modalOverlay = document.querySelectorAll(".overlay");
const modalWindow = document.querySelectorAll(".modal_window");
const modalCloseBtn = document.querySelectorAll(".close_modal");
const modalOpenBtn = document.querySelectorAll(".open_modal");

const closeModal = ()=>{
    modalOverlay[i].classList.add("hidden");
    modalWindow[i].classList.add("hidden");
}

for (let i = 0; i < modalOpenBtn.length; i++) {
    modalOpenBtn[i].addEventListener("click", ()=>{
        modalOverlay[i].classList.remove("hidden");
        modalWindow[i].classList.remove("hidden");
    })
}

for (let i = 0; i < modalCloseBtn.length; i++) {
    modalCloseBtn[i].addEventListener("click", closeModal)
}

for (let i = 0; i < modalOverlay.length; i++) {
    modalOverlay[i].addEventListener("click", closeModal)
}