I’m trying to dynamically load content with infinite scrolling on my webpage. I want to prefetch the next page’s content and show a small preview when hovering over a button. However, after the second page is loaded, the preview for subsequent pages doesn’t work. Here’s my current setup:

fb

Home

About Me
Projects

<img src=”{{ url_for(‘ alt=”fistbump home page”>

        <div class="selector-content">
            <div class="page-row-section">
                <div style="margin-top: 100px; margin-bottom: 100px; margin-left: 350px; margin-right: 350px;">
                    <p1 class="page-text"> Fistbump is a social networking app that links you with other users. Each day, you recieve 1 random user, with whom you must meet up with in person, and take a picture with them. After this, your image is shared to the wall, where everyone can see connections being made with their friends. This short act of meeting up to take your Fistbump together finishes the hardest step of meeting new people: Breaking the ice. After meeting each other, the two users are physically close and have talked, and this small connection could lead to more conversations, activities done together, shared phone numbers, and eventually, a new friendship.</p1>
                </div>
            </div>
        </div>
        <div class="selector-content">
            <div class="page-row-section" style="margin-bottom: 100px;">
                <img style="margin-right: 100px;" class="img-vertical" src="{{ url_for('static', filename='images/fistbumpProfile.jpeg') }}" alt="fistbump profile page">
                <img style="margin-left: 100px;" class="img-vertical" src="{{ url_for('static', filename='images/fistbumpPhoto.jpeg') }}" alt="fistbump picture page">
            </div>
        </div>
        <div class="buffer-zone page-row-section"> 
            <button class="load-button" onmouseover="previewNextPage()" onmouseleave="hideNextPage()" onmouseout="hideNextPage()" onclick="loadMoreContent()">
                <img style="position: relative;" src="{{ url_for('static', filename='images/arrow_down.png') }}">
            </button>
        </div>
        <div id="next-page-preview" class="hidden"></div>

    </main>
</div>


<div id="loading" style="display: none;">Loading...</div>

<script>
    const pages = [
        '/fistbump',
        '/stockSentiment'
    ];
    let currentPageIndex = 0;
    let loading = false;
    let nextPageContent = '';
    let isPreviewFetchNextPage = false;

    const disableDownScroll = (event) => {
        if (event.deltaY > 0 || event.key === 'ArrowDown') {
            event.preventDefault();
        }
    };

    const disableAllScroll = () => {
        document.body.classList.add('no-scroll');
    };

    const enableScroll = () => {
        window.removeEventListener('wheel', disableDownScroll, { passive: false });
        window.removeEventListener('keydown', disableDownScroll, { passive: false });
        document.body.classList.remove('no-scroll');
    };

    const updateEventListeners = () => {
        const button = document.querySelector('.load-button');
        button.onmouseover = previewNextPage;
        button.onmouseleave = hideNextPage;
        button.onclick = loadMoreContent;
    };

    const loadMoreContent = () => {
        if (loading) return;
        loading = true;
        document.getElementById('loading').style.display = 'block';

        currentPageIndex = (currentPageIndex + 1) % pages.length;
        fetch(pages[currentPageIndex])
            .then(response => response.text())
            .then(data => {
                const parser = new DOMParser();
                const newDocument = parser.parseFromString(data, 'text/html');
                const newContent = newDocument.getElementById('infinite-content').innerHTML;
                const newContentContainer = document.createElement('div');
                newContentContainer.innerHTML = newContent;

                const oldContent = document.querySelectorAll('#infinite-content > div');
                oldContent.forEach(element => element.classList.add('hidden-content'));

                document.getElementById('infinite-content').appendChild(newContentContainer);
                document.getElementById('loading').style.display = 'none';
                loading = false;

                window.scrollTo({ top: 0, behavior: 'smooth' });

                enableScroll();
                updateEventListeners();
                prefetchNextPage();
            })
            .catch(error => {
                console.error('Failed to load content:', error);
                document.getElementById('loading').style.display = 'none';
                loading = false;
                enableScroll();
            });
    };

    const prefetchNextPage = () => {
        const nextPageIndex = (currentPageIndex + 1) % pages.length;
        fetch(pages[nextPageIndex])
            .then(response => response.text())
            .then(data => {
                const parser = new DOMParser();
                const newDocument = parser.parseFromString(data, 'text/html');
                nextPageContent = newDocument.getElementById('infinite-content').innerHTML; // Store the pre-fetched content
                document.getElementById('next-page-preview').innerHTML = nextPageContent;
            })
            .catch(error => {
                console.error('Failed to prefetch next page:', error);
            });
    };

    const previewNextPage = () => {
        if (nextPageContent) {
            document.getElementById('next-page-preview').classList.remove('hidden');
            isPreviewFetchNextPage = true;
            document.getElementById('next-page-preview').innerHTML = nextPageContent;
            disableAllScroll();
        } else {
            console.warn('No content to preview');
        }
    };

    const hideNextPage = () => {
        document.getElementById('next-page-preview').classList.add('hidden');
        isPreviewFetchNextPage = false;
        enableScroll();
    };

    document.addEventListener('DOMContentLoaded', () => {
        function checkVisibility() {
            const elements = document.querySelectorAll('.selector-content');
            elements.forEach(footerEl => {
                const rect = footerEl.getBoundingClientRect();
                if (rect.bottom <= (window.innerHeight + 150)) {
                    footerEl.classList.add('visible-selector-content');
                }
            });
        }
        window.addEventListener('scroll', checkVisibility);
        window.addEventListener('resize', checkVisibility);
        checkVisibility();

        prefetchNextPage();

        window.addEventListener('scroll', () => {
            const nextPagePreview = document.getElementById('next-page-preview');
            const nextPagePreviewRect = nextPagePreview.getBoundingClientRect();
            const previewHeight = nextPagePreviewRect.height;

            if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - previewHeight) && isPreviewFetchNextPage) {
                window.addEventListener('wheel', disableDownScroll, { passive: false });
                window.addEventListener('keydown', disableDownScroll, { passive: false });
            }
        });

        updateEventListeners();
    });

I tried a lot and was expecting the preview screen to show up at the bottom of newly generated pages, not just the first.