Недавно начал изучать JS, не понимаю почему не выполняется данный код
let sliderItem = document.querySelectorAll('.works__slider--item'),
popup = document.querySelectorAll('.works__popup'),
closeBtn = document.querySelectorAll('.works__popup--close');
for (let i = 0; i < sliderItem.length; i++) {
/* Открытие окна */
sliderItem[i].addEventListener('click', () => {
popup[i].style.display = "flex";
});
/* Закрытие окна */
closeBtn[i].addEventListener('click', () => {
popup[i].style.display = "none";
});
};
.works__popup {
display: none;
}
<div class="works__slider--item">
<div tabindex="0" class="works__slider--link">Lorem, ipsum.</div>
<!-- Popup -->
<div class="works__popup">
<div class="works__popup--inner">
<div tabindex="0" class="works__popup--close">X</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, ratione?
</div>
</div>
</div>
Срабатывает только первая часть скрипта, т.е. модальное окно всплывает, но по нажатию на кнопку закрытия, не закрывается. Не понимаю почему так происходит, подскажите пожалуйста.