“Copy to Clipboard” Code Does Not Interact Correctly with PopUps

Hello everyone.

I am applying creative functions throughout my website using Elementor’s PopUp feature, and I encountered a problem.

The idea is that a button on the page triggers a PopUp, and within this PopUp, a list of columns opens, where each column has its own “Copy” button next to it. When clicked, it should copy the Text defined in the code inside the HTML Widget next to the button to the clipboard and display a success PopUp at the top of the browser. However, nothing happened…

This is the code:

<script>
document.addEventListener("DOMContentLoaded", function() {
    const textToCopy = "This is the text to copy."; // Change to desired text
    const copyButton = document.getElementById("CouponTest1");

    copyButton.addEventListener("click", function() {
        const tempInput = document.createElement("input");
        tempInput.value = textToCopy;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);
        alert("Text copied successfully!");
    });
});
</script>

This is the Custom CSS:

.container {
    text-align: center;
    margin-top: 50px;
}

The button receives the CSS ID “CouponTest1,” which simply triggers the code. The significant difference is that in a regular page, the code works perfectly, while in a PopUp, nothing happens.

My project is a button that delivers a Coupon Code to the customer for later use in my store, providing a smarter and more interesting experience.

Could you help me solve this problem in my project?

Thank you for your attention.