Не получается открыть модальное окно асинхронной функции

У меня проблема которая мучает меня уже больше недели, хочу написать код на ванильном JS, без использования реакт, будстрап и тд.

В макете 6 картинок, которое приходят от сервера, через асинхронную функцию, у каждой картинки есть свой ID.

Проблема в следующем, при нажатии на картинку в pop-up`e должна вылезать еще одна картинка, большего размера,которая приходит из уже другой асинхронной функции.

Для каждой картинки, своя функция, получается: 1 функция для вызова 6 картинок и 6 разных функций для вызова картинки бОльшего размера

Я не знаю, как сказать программе, что я хочу чтобы при нажатии именно на определенную картинку у меня вызывалась определенная функция из 6, тк я все картинки поместил в цикл

Цикл нужен был, чтобы присвоить всем фото один и тот же класс и обращаться по нему

async function images() {
  const res = await fetch(`${api.endpoint}`)
  result = await res.json()
  displayResult(result)
  console.log(result)
}

function displayResult(result) {
  for (i = 0; photos.length; i++) {
    console.log(result[i].url)    
    photos[i].src = result[i].url
    id[i].innerHTML = `id:${result[i].id}`
  }
}

пробовал вставить addEventListener в цикл, но тогда возникает ошибка, вида

photos[i].src ис нот а функшен