Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

Hello, it’s working correctly on the first button but not the second or the third. Just wondering what I’m doing wrong here. Thank you.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Favorite Icon Toggler</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
  <ul class="item-list">
    <li>Thing 1<button class="favorite-icon">&#9825</button></li>
  <li>Thing 2<button class="favorite-icon">&#9825</button></li>
  <li>Thing 3<button class="favorite-icon">&#9825</button></li>
  </ul>
  <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
.filled{
  background-color: lightgrey;
  border: dotted 2px #000;
  color:red;
}



/* file: script.js */
const list = document.querySelector(".item-list");
const button = document.querySelector(".favorite-icon")

button.addEventListener("click", () => {
button.classList.toggle("filled")
button.innerHTML = "&#10084"
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

what is button? consider which element you have there