JavaScript DOMでは、ボタン機能全体を別の機能に複製することは可能ですか？

つまり、既存のボタンを、既存のボタンとして機能する新しく作成されたボタンに接続することは可能ですか？

参照サイト：https：//www.ninetypercent.com/products/sleeveless-gather-maxi-dress-c5？color = red

上記のリンクを開いた後、以下のコードをブラウザコンソールに貼り付けてください。

let title = document.querySelector(".product-details__name").textContent;
let price;
let oldPrice = document.querySelector(".product-details__old-price");

if (oldPrice) {
    price = oldPrice.nextSibling.textContent.trim();
} else {
    price = document.querySelector(".js-product-price").textContent;
}

let div = document.createElement("div");

let path = document.querySelector("header");
div.innerHTML = `
    <div
        id="sticky-nav"
        style="position: fixed;
               top:110px;
               display: none;
               padding: 0 10px;
               justify-content: space-between;
               align-items: center;
               background-color:#e4e4e4;
               width: 100vw;"
        class="sticky-wrapper"
    >
    <div
        style="width:80%; display: flex; justify-content: space-between; align-items:center"
        class="sticky-text-wrapper"
    >
        <p style="margin: 0;" class="sticky-text">${title}</p>
        <p style="margin: 0;" class="sticky-price">${price}</p>
    </div>
    <span style="width: 18%; display: flex; justify-content: space-around;" class="button"></span>
</div>`;

path.appendChild(div);
const sourceElement = document.querySelector(".js-product-details-submit-wrapper button");

const destination = document.querySelector(".button");

const copy = sourceElement.cloneNode(true);
destination.appendChild(copy);

window.addEventListener("scroll", () => {
    const scrollPos = window.scrollY;
    if (scrollPos > 1500) {
        document.getElementById("sticky-nav").style.display = "flex";
    } else {
        document.getElementById("sticky-nav").style.display = "none";
    }
});

sticky-navボタンを既存の「AddtoBag」ボタンに接続したいのですが、両方のボタンの機能は同じになります。コントロールと同じメッセージがPDP（製品詳細ページ）に表示され、バスケットアイコンの数量が増加します。どうやってやるの？