I am developing a card game to play in the browser. This is a project for my javascript module so I am learning my way out of it. I need to move a card from place to place, this is not difficult if the targeted div exists in index.html but I need to target the children and they are all dynamically created. when I change the target to the children with a new class the event listener broke. I need help to successfully target these dynamic children.

const card = getDOMElement(FLIPPED_CARDS_ID);
card.addEventListener("mousedown", mouseDown);

  const mouseDown = (e) => {
  let prevX = e.clientX;
  let prevY = e.clientY;

  const mouseMove = (e) => {
    let newX = prevX - e.clientX;
    let newY = prevY - e.clientY;
    const rect = card.getBoundingClientRect();
    card.style.left = rect.left - newX + "px";
    card.style.top = rect.top - newY + "px";
    prevX = e.clientX;
    prevY = e.clientY;
  };
  window.addEventListener("mousemove", mouseMove);
  const mouseUp = () => {
    window.removeEventListener("mousemove", mouseMove);
    window.removeEventListener("mouseup", mouseUp);
  };
  window.addEventListener("mouseup", mouseUp);
};

the div affected is the following

  const flippedCardsDiv = getDOMElement(FLIPPED_CARDS_ID);
  const newFlippedCard = document.createElement("div");
  newFlippedCard.classList.add("new-flipped-card");
  const flippedCards = deck.dealOneCard();
  newFlippedCard.innerHTML = getNewCardHtml(flippedCards[0]);
  flippedCardsDiv.appendChild(newFlippedCard);

I hope I was clear enough explaning my problem . Thanks in advance.