What I want is to get the different information of each card to textArea by pressing the correspondent button that have the same class

Question

At the moment, I get all the time the same info which comes from the first card.

const name = document.querySelector(".name").textContent;
const partNumber = document.querySelector(".part-number").textContent;
const price = document.querySelector(".price").textContent;
const textArea = document.querySelector("#message");
let inputQuantity = document.getElementById("quantity");
const buyButton = document.querySelectorAll(".buy-button");


for (let i = 0; i < buyButton.length; i++)
  buyButton[i].addEventListener("click", function () {
    inputQuantity = inputQuantity.value;
    textArea.innerHTML = `I WANT TO BUY
${inputQuantity} ${name}(S)
${partNumber}
${price}

Thank You
`;
  });

to get the information of each card to textArea by pressing the correspondent button.