I wanna use mutation observer to add a function (add a text box),

• the first time page loads, console.log disconnect and console.log addBannerCTA are supposed to appear once, but it appear twice.
• After clicking the page link and redirect back to the same page with mutation observer, disconnect and addBannerCTA appear at least 10 times, and the text box cannot show on large view port, but can show on small viewport.

I checked many times but cannot figure it out. Can anyone help? Thanks a ton.

addBannerCTA();

const targetEl = document.querySelector('html');
const cbMutate = (mList) => {
    mList.forEach(
        (rec) => {
            observer.disconnect();
            console.log('disconnect');
            if (jQuery('.passenger-detail').text().includes(ctaWords) && jQuery('#banner-content').length === 0) {
                addBannerCTA();
                console.log('addBannerCTA');
            }
        }
    );
};

const config = {
    childList: true,
    subtree: true
}

const observer = new MutationObserver(cbMutate);
observer.observe(targetEl, config);````