Second dialog element not working and I don't know why

 // Select the single dialog and its elements
const dialog = document.getElementById("image-dialog");
const dialogImg = dialog.querySelector(".dialog-img");
const cancelBtn = dialog.querySelector(".cancel");

// Attach click event listener to the container
document.body.addEventListener("click", (event) => {
  const button = event.target.closest(".updateDetails");
  
  if (button) {
    // Get the image inside the clicked button
    const clickedImage = button.querySelector(".card__img");

    if (clickedImage) {
      // Set the source and alt attributes of the dialog image
      dialogImg.src = clickedImage.src;
      dialogImg.alt = clickedImage.alt;

      // Show the dialog
      dialog.showModal();
    }
  }
});

// Close the dialog on cancel button click
cancelBtn.addEventListener("click", () => {
  dialog.close();
});

 // Select the single dialog and its elements
const dialog = document.getElementById("image-dialog");
const dialogImg = dialog.querySelector(".dialog-img");
const cancelBtn = dialog.querySelector(".cancel");

// Attach click event listener to the container
document.body.addEventListener("click", (event) => {
  const button = event.target.closest(".updateDetails");
  
  if (button) {
    // Get the image inside the clicked button
    const clickedImage = button.querySelector(".card__img");

    if (clickedImage) {
      // Set the source and alt attributes of the dialog image
      dialogImg.src = clickedImage.src;
      dialogImg.alt = clickedImage.alt;

      // Show the dialog
      dialog.showModal();
    }
  }
});

// Close the dialog on cancel button click
cancelBtn.addEventListener("click", () => {
  dialog.close();
});

.dialog-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
 }

.dialog-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
 }