How to show images and videos on the container click in Elementor with GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<script>
  const itemsArray = [];
  const cursor = document.querySelector(".cursor");

  // Array of image and video URLs
  const mediaData = {
    images: [
      'https:your-img.png',
      'https:your-img.png',
      'https:your-img.png',
    ],
    videos: [
      'https:your-video.mp4',
      'https:your-video.mp4',
      'https:your-video.mp4',
    ],
  };

  // Check if the device is mobile
  function isMobileDevice() {
    return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
  }

  document.addEventListener("mousemove", (e) => {
    gsap.to(cursor, {
      x: e.clientX - cursor.offsetWidth / 2,
      y: e.clientY - cursor.offsetHeight / 2,
      duration: 0.5,
      ease: "power2.out",
    });
  });

  document.addEventListener("click", function (event) {
    if (isMobileDevice()) {
      return; // Disable functionality on mobile devices
    }

    const itemType = Math.random() < 0.5 ? "video" : "image";
    let container = document.createElement("div");
    let elementWidth = 400;

    if (itemType === "video") {
      const videoSrc = mediaData.videos[Math.floor(Math.random() * mediaData.videos.length)];
      container.innerHTML = `<div class="video-container">
                               <video autoplay loop>
                                 <source src="${videoSrc}" type="video/mp4"/>
                               </video>
                             </div>`;
    } else {
      const imgSrc = mediaData.images[Math.floor(Math.random() * mediaData.images.length)];
      container.innerHTML = `<div class="img-container">
                               <img src="${imgSrc}" alt="Random Image" />
                             </div>`;
    }

    appendAndAnimateElement(container.firstChild, event.clientX, event.clientY, elementWidth);
  });

  function appendAndAnimateElement(element, clientX, clientY, elementWidth) {
    document.querySelector(".items-container").appendChild(element);

    element.style.position = 'absolute';
    element.style.left = `${clientX - elementWidth / 1}px`;
    element.style.top = `${clientY}px`;
    const randomRotation = Math.random() * 10 - 5;

    gsap.set(element, {
      scale: 0,
      rotation: randomRotation,
      transformOrigin: "center",
    });

    const tl = gsap.timeline();
    const randomScale = Math.random() * 0.4 + 0.3;

    tl.to(element, {
      scale: randomScale,
      duration: 0.5,
    });

    tl.to(
      element,
      {
        y: () => `-=500`,
        opacity: 1,
        duration: 4,
        ease: "none",
      },
      "<"
    ).to(
      element,
      {
        opacity: 0,
        duration: 1,
        onComplete: () => {
          element.parentNode.removeChild(element);
          const index = itemsArray.indexOf(element);
          if (index > -1) {
            itemsArray.splice(index, 1);
          }
        },
      },
      "-=0.5"
    );
  }
</script>