TtT RrR

$(document).on("click", ".products__card", (e) => {
  const modalOverlay = document.querySelector(".products-popup");
  let num = e.currentTarget.getAttribute("data-num");
// Число передаётся в функцию, чтоб показать конкретную инфу в popup
  loadPopup(num);
setTimeout(() =>{
  const modals = document.querySelectorAll(".products-popup__wrapper");
  const target = document.querySelector(`[data-target="${num}"]`);
  console.log(target);
  modals.forEach((modal) => {
    modal.classList.remove("popup__wrapper_active");
  });
  target.classList.add("popup__wrapper_active");
  modalOverlay.classList.add("popup_active");
  document.querySelector("body").classList.add("lock");

  modalOverlay.addEventListener("click", (e) => {
    if (e.target == modalOverlay || e.target.closest('.products-popup__close')) {
      modalOverlay.classList.remove("popup_active");
      document.querySelector("body").classList.remove("lock");
      modals.forEach((modal) => {
        modal.classList.remove("popup__wrapper_active");
      });
    }
  });
}, 100);
});

const fioUrl = "https://jsonplaceholder.typicode.com/users";

const xhr = new XMLHttpRequest();
xhr.open("GET", fioUrl);
xhr.responseType = "json";
xhr.onload = function () {
  console.log(xhr.response);

  document.querySelector("#demo").innerHTML = toHtml(xhr.response);
};
xhr.send();

function toHtml(json) {
  let html = "";
  for (let k = 0; k < json.length; k++) {
    const key = json[k];
    html += `<tr>
        <td>${key.id}</td>
        <td>${key["name"]}</td>
        <td>${key["username"]}</td>
        <td>${key.email}</td>
        <td>${key.address['street']} - ${key.address['suite']}</td>
        <td>${key.phone}</td>
        <td>${key.website}</td>
        <td>${key.company['name']}</td>
      </tr>`;
  }
  return html;
}