How to change the class of an element when clicking on another element using js?

Question

PHP

Hello.

The bottom line is that I need to change the class in a certain block, but I have it changing in all blocks.

<div class="main">
    <div class="but">кнопка</div>
    <p class="text">изменить текст</p>
  </div>
  <div class="main">
    <div class="but">кнопка</div>
    <p class="text">изменить текст</p>
  </div>
  <div class="main">
    <div class="but">кнопка</div>
    <p class="text">изменить текст</p>
  </div>
  <div class="main">
    <div class="but">кнопка</div>
    <p class="text">изменить текст</p>
  </div>

How to write jq code correctly so that when you click on the "but" class, the "text" class only changes in one block?

Thanks in advance.

Answer 1

$id = $_SESSION['logged_user']->id;
    $user = R::load('users', $id);
    $user->vk = $data['vk'];
    R::store($user);

I solved the problem, if the method is shit, write the right way :)

Answer 2

let mains = [ ...document.querySelectorAll(".main") ];
mains.forEach(main => {
    let btn = main.querySelector(".but"),
         text = main.querySelector(".text");
     btn.addEventListener("click", () => text.classList.toggle("some-class"));
});