Clone node from a separate file to current page

Hi,

I’m trying to create a plugin with a UI elements library. I have a document with all the components I want to list and the plugin will have an image preview of each. When clicking the image, the component will be cloned on the current page.

My current code looks like this

 <div class="image-gallery">
    <div>
      <a href="#" class="gallery-image" data-file-id="9JkYmYgxjpGzBUNiJESfdi" data-node-id="3698-1207">
        <img class="thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/310px-Placeholder_view_vector.svg.png" alt="Gallery Image">
      </a>
    </div>
  </div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
      // Find the image element
      const imageElement = document.querySelector(".gallery-image");

      // Add a click event listener to the image
      imageElement.addEventListener("click", function(event) {
        event.preventDefault();
        
        // Get the data attributes with file ID and node ID
        const fileId = imageElement.getAttribute("data-file-id");
        const nodeId = imageElement.getAttribute("data-node-id");
        
          // Use the Figma API to clone the component
          const node = figma.getNodeById(nodeId);
          const clone = node.clone();

          // Parent the clone under the current page
          const currentPage = figma.currentPage;
          currentPage.appendChild(clone);
      });
    });
  </script>

What am I missing because it’s not working?

Thanks in advance!