I have set up a JS lightbox with 6 different images. When I click on an image, the same image pops up in the lightbox, rather than the image I clicked on. The image that displays every time is the last image of those that have the tag '.service_img'. Is there some kind of JS I can add to make it show the image I click on, rather than the same one each time?
const lightbox = document.createElement('div')
lightbox.id = 'lightbox'
document.body.appendChild(lightbox)
function openLightbox(){
const images = document.querySelectorAll('.service_img');
images.forEach(image => {
lightbox.classList.add('active');
const img = document.createElement('img')
img.src = image.src
while (lightbox.firstChild){
lightbox.removeChild(lightbox.firstChild)
}
lightbox.appendChild(img)
})
}
lightbox.addEventListener('click', e => {
if (e.target !== e.currentTarget) return
lightbox.classList.remove('active')
})