Conditionally change custom modal link in quick view modal

Store Design
1

I’ve implemented a read more modal for my product descriptions, and it works beautifully on the product page. But I did not account for the quick view modal on collection pages. It does not work there, possibly because the modal class is already in use by the quick view modal. My thought was maybe I needed to change the modal class name in my custom code so it wasn’t clashing with what’s already in the theme, but I tested that and the custom modal still did not open while in the quick view modal. Also tried loading my custom file product-modal.js to collection template and that didn’t change anything either.

Here’s my js:

let modal;
document.addEventListener("click", (e) => {
  if (e.target.className === "modal-open") {
    modal = document.getElementById(e.target.dataset.id);
    openModal(modal);
  } else if (e.target.className === "modal-close") {
    closeModal(modal);
  } else {
    return;
  }
});

const openModal = (modal) => {
  document.body.style.overflow = "hidden";
  modal.setAttribute("open", "true");
  document.addEventListener("keydown", escClose);
  let overlay = document.createElement("div");
  overlay.id = "modal-overlay";
  document.body.appendChild(overlay);
};

const closeModal = (modal) => {
  document.body.style.overflow = "auto";
  modal.removeAttribute("open");
  document.removeEventListener("keydown", escClose);
  document.body.removeChild(document.getElementById("modal-overlay"));
};

const escClose = (e) => {
  if (e.keyCode == 27) {
    closeModal();
  }
};

And here’s how I tried to load it on collections:

{%- if template contains 'product' or template.name == 'collection' -%}
     
  {%- endif -%}

Would greatly appreciate help with this, thank you!