Кнопка JS срабатывает только по первому элементу

Я создал кнопку, которая меняет текст при нажатии. Однако действие работает только для первой кнопки на странице. Любая кнопка ниже в коде, имеющая такое же действие, не работает. Как мне изменить JS, чтобы он позволял многократно запускать событие?

Спасибо!

HTML:

<div class = "addtocart">
   <a href = "#" class = "add-to-cart">
      <div class = "pretext">
      ADD TO CART
      </div>
   </a>
   <div class = "pretext done">
      <div class = "posttext"><i class = "fas fa-check"></i> ADDED</div>
   </div>
</div>

JS:

<script>
const button = document.querySelector(".addtocart");
const done = document.querySelector(".done");
console.info(button);
let added = false;
button.addEventListener("click", () => {
  if (added) {
    done.style.transform = "translate(-110%) skew(-40deg)";
    added = false;
  } else {
    done.style.transform = "translate(0px)";
    added = true;
  }
});
</script>