我在使用 Javascript 向按钮添加类时遇到了困难。

上下文：我有多张 instragram 类型格式的卡片，上面有一个帖子和一个“赞”按钮。我想添加一个 card__like-button 类，将图像更改为实心心形，但我记得 querySelector 仅适用于第一个元素，因此我尝试使用 querySelectorAll，但现在代码不适用于任何内容。

第一次尝试：

// Controls for active like button
let likeButton = document.querySelector(".card__like-button");
   
// Event listener for like button click
likeButton.addEventListener("click", likeButtonClick);
    
// Add class on button click
function likeButtonClick() {
likeButton.classList.toggle("card__like-button_active");
    }

第二次尝试

// Controls for active like button
let likeButton = document.querySelectorAll(".card__like-button");

// Event listener for like button click
likeButton.addEventListener("click", likeButtonClick);

// Add class on button click
function likeButtonClick() {
  likeButton.classList.toggle("card__like-button_active");
}

我创建了以下 codepen 来复制该问题。

我已经在网站、w3schools 文档等处进行了搜索，但似乎找不到我做错了什么。