classList.toggle problem with more than one element-CodePudding

I am currently trying to style a series of buttons so that when clicked they change to a different style and the text content also changes. It is working except that when I click the another button with the same class, the other button loses its classList toggle. It all works until I press the button on the next element, and would need them to work independently since they are being used to mark whether the book has been read or not.

const readButtons = document.querySelectorAll(".book__read-button");

readButtons.forEach((readButton) => {
  let clickCount = 0;

  readButton.addEventListener("click", (e) => {
    readButtons.forEach((f) =>
      f != e.target ? f.classList.remove("clicked") : ""
    );
    e.target.classList.toggle("clicked");

    clickCount  = 1;

    if (clickCount % 2 == 0) {
      readButton.textContent = "Unread";
    } else {
      readButton.textContent = "Read";
    }
  });
});

.book__read-button.clicked {
  background-color: green;
  border: 2px solid var(--teal-200);
}

<ul >
  <li >
    <span >The Catcher in the Rye | J. D. Salinger | 277 Pages</span>
    <button >Unread</button>
    <button type="button" >
            </button>
  </li>
  <li >
    <span >Maid | A.Sommer | 277 Pages</span>
    <button >Unread</button>
    <button type="button" ></button>
  </li>
  <li ></li>
</ul>

CodePudding user response：

You can assign an eventListener to each button and trigger a function to handle the toggle classList and the button textContent, try this:

const readButtons = document.querySelectorAll(".book__read-button");

readButtons.forEach(readButton => {
    readButton.addEventListener("click", e => bookReaded(e));
});

function bookReaded(event) {
    console.log(event.target);
    event.target.classList.toggle('clicked');
    event.target.textContent = event.target.textContent == 'Unread' ? 'Read' : 'Unread';
}

.book__read-button.clicked {
    background-color: green;
    border: 2px solid var(--teal-200);
}

<ul >
    <li >
        <span >The Catcher in the Rye | J. D. Salinger | 277 Pages</span>
        <button id="the-catcher" >Unread</button>
    </li>
    <li >
        <span >Maid | A.Sommer | 277 Pages</span>
        <button id="maid" >Unread</button>
    </li>
    <li ></li>
</ul>