API에서 데이터를 감염시키는 JS에 의해 생성되는 컨테이너의 CSSi ID를 선택하는 방법이 있습니까?

일부 제품을 보여주는 페이지를 만들고 있으며 데이터는 API에서 가져옵니다. 이 페이지는 JS / es6 및 Bootstrap4로 구축되었습니다. 지금까지 내가 한 일은 데이터를 가져오고 forEach를 사용하여 API 데이터로 제품 카드를 동적으로 생성하는 것이 었습니다.

예:

listOfProducts.forEach(product => {
    // We create a template a blueprint for our cards and passing with literal template
    // Dynamically as foreach will loop and for every product in the array will print the card
    // using ${product.title} we pass the title of the product from JSON OBJ of our products
    // fetched from API
    out += `<div class="col-sm-6 col-md-4 py-2">`;
    out += `    <div id="${product.asin}" class="card h-100 d-flex flex-column">`;
    // To img we give src of the img from JSON OBJ and ALT the ASIN
    out += `        <img src="${product.img}" class="card-img-top" alt="${product.asin}">`;
    out += `        <div class="card-body">`;
    // We pass product title & price from JSON OBJ
    out += `            <h5 class="card-title">${product.title}</h5>`;
    out += `            <p class="card-text">${product.price}$</p>`;
    // Button add to cart & skip
    out += `            <button class="btn add-to-cart"><i class="fas fa-cart-plus"></i></button>`;
    out += `            <button class="btn skip"><i class="far fa-trash-alt"></i></button>`;
    out += `        </div>`;
    out += `    </div>`;
    out += `</div>`;

  }); 

내 문제는 위의 예에서 장바구니에 추가 버튼 작업을 시작했을 때입니다. 내가 지금 달성하고 싶은 것은 버튼을 클릭하면 카드가 테두리를 녹색으로 변경하는 클래스를 선택해야하지만 선택한 CSS ID를 가져 와서 선택한 클래스를 추가하거나 첨부 할 수 없다는 것입니다.

나는 다음과 같이 시도했다.

let test = row.querySelector('.add-to-cart').addEventListener('click', product => {
    const productId = document.querySelector(`#${product.asin}`);
    productId.class.add('selected');
 });

하지만 콘솔은 내 제품이 정의되지 않았거나 forEach 안에 같은 것을 넣으면 내 제품 ID가 null이므로 오류가 발생합니다.

내가 원하는 것은 다음과 같이 명확하게하는 것이기 때문에 최선의 해결책을 찾으려고 노력하고 있습니다.

• 장바구니에 추가 버튼 클릭
• 클릭 한 제품은 클래스가 선택되고 보드 색상이 녹색으로 변경됩니다.

내 전체 스크립트는 다음과 같습니다. mainjs