How to made separate popups for each element in array using JS?

I have an array with products in it. Each product is a separate block (card) on the page which appears after user uses checkboxes on the same page. The product cards are buttons. What I need to do is that when user clicks on any product card it opens a popup which is linked to said card. Like if user clicks on ‘product1 card’ it opens ‘product1 popup’, ‘product2 card’ opens ‘product2 popup’ etc.

I’m new to JS so i would appreciate any help, thanks!

Here is how I tried to do it, but it doesn’t work.

// Creating an array and put an individual popup code as 'popupHtml'
function showProducts(selectedValues) {
  const resultsList = document.querySelector('.results__list');
  const products = [
    {
      id: 'giorgiocasa',
      name: 'Giorgiocasa',
      values: ['cont', 'high', 'mirgroup'],
      popupHtml: `<div class="popup__container">
         <button class="popup__close-button" type="button"></button> 
         <img src="./images/giorgiocasa2.png" class="popup__image" alt="giorgiocasa"> 
         <div class="popup__text"> 
          <p class="popup__title">Giorgiocasa</p> 
          <a class="popup__link" href="#">Официальный сайт</a> 
          <p class="popup__description">Представительство: <span>MIRGROUP</span></p> 
          <p class="popup__subtitle">Условия работы</p> 
          <p class="popup__description">Скидка: 50%
            <br>Предоплата: 50%
            <br>Сроки производства: 45 рабочих дней
          </p> 
        </div> 
      </div>`
    },
    {
      id: 'piermaria',
      name: 'Piermaria',
      values: ['classic', 'midHigh', 'mirgroup'],
      popupHtml: `<div class="popup__container">
         <button class="popup__close-button" type="button"></button> 
         <img src="./images/giorgiocasa2.png" class="popup__image" alt="giorgiocasa"> 
         <div class="popup__text"> 
          <p class="popup__title">Piermaria</p> 
          <a class="popup__link" href="#">Официальный сайт</a> 
          <p class="popup__description">Представительство: <span>MIRGROUP</span></p> 
          <p class="popup__subtitle">Условия работы</p> 
          <p class="popup__description">Скидка: 50+3%
            <br>Предоплата: 50%, заказ до 2000 евро - 100%
            <br>Сроки производства: 45 рабочих дней
          </p> 
        </div> 
      </div>`
    },
];
  let matchingProducts = [];

// Creating and adding a product card or 'no results' to the page
if (selectedValues.length === 0) {
    const noResultsHtml = '<p class="results__text">НЕТ РЕЗУЛЬТАТОВ</p>';
    resultsList.innerHTML = noResultsHtml;
    return;
  }

  products.forEach(function(product) {
  let matchCount = 0;
  selectedValues.forEach(function(value) {
  if (product.values.includes(value)) {
  matchCount++;
  }
  });
  if (matchCount === selectedValues.length) {
  matchingProducts.push(product);
  }
  });
  
  resultsList.innerHTML = '';
  

  if (matchingProducts.length === 0) {
  const noResultsHtml = '<p class="results__text">НЕТ РЕЗУЛЬТАТОВ</p>';
  resultsList.insertAdjacentHTML('beforeend', noResultsHtml);
  } else {
  let html = '';
  matchingProducts.forEach(function(product) {
  html += `<li>
              <button class="results__card" type="button" id="${product.id}"><span class="results__card-text">${product.name}</span></button>
            </li>`;
  });
  resultsList.insertAdjacentHTML('beforeend', html);
  }
  }

// results__card are all button tags
const buttons = document.querySelectorAll('.results__card');

// Trying to open a popup linked to the specific product card after click 
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const popupContent = button.dataset.popupHtml;
    
    const popup = document.createElement('div');
    popup.classList.add('popup-container');
    popup.innerHTML = popupContent;

    const container = document.querySelector('.popup');
    container.appendChild(popup);
  });
});

const resultsCards = document.querySelectorAll('.results__card');

resultsCards.forEach(function(card) {
  card.addEventListener('click', function() {
    const productId = this.dataset.productId;
    const product = products.find(function(p) {
      return p.id === productId;
    });

// My popup opens with popup_opened class and closes with adding popup_closed class.
    const popup = document.querySelector('.popup');
    popup.innerHTML = product.popupHtml;
    popup.classList.remove('popup_closed');
    popup.classList.add('popup_opened');
  });
});