Как при нажатии на элемент добавить класс другому элементу?

Question

[Denis_8106]

Есть такой незатейливый слайдер. Как при нажатии на элемент "i-play" добавлять класс элементу "p", в каждом слайде, независимо друг от друга?

<ul class="slider">
	<li class="slide">
		<div class="i-play"></div>
		<p>Простот текст</p>
	</li>

	<li class="slide">
		<div class="i-play"></div>
		<p>Простот текст</p>
	</li>

	<li class="slide">
		<div class="i-play"></div>
		<p>Простот текст</p>
	</li>
</ul>

Я думал как-то так

document.querySelectorAll(".i-play").forEach((el) => {
      el.addEventListener("click", function () {
        document.querySelector(".slide p").classList.add("show");
      });
    });

Но при данном коде срабатывает только первый слайд.

Answer 1

[historydev]

document.querySelectorAll(".i-play").forEach((el) => {
      el.addEventListener("click", function () {
        document.querySelectorAll(".slide p").forEach(p => {
             p.classList.add("show");
        });
      });
    });