Recursive function can't check if generated index of a site (desc, title, img, etc stored in my database) is already on page

var infiniteResponseAAA= {
Poodwaddle_com: '"Poodwaddle.com", infiniteResponse[1].children[language].children[17].innerHTML, "Images\poodwaddle.com.jpg", searchBResponse[1].children[17].textContent',
SystemRequirementsLab_com: '"System Requirements Lab.com", infiniteResponse[1].children[language].children[18].innerHTML, "Images\systemrequirementslab.com.jpg", searchBResponse[1].children[18].textContent',
BrowsePad: '"BrowsePad.org", infiniteResponse[1].children[language].children[19].innerHTML, "Images\BrowsePad.org.jpg", searchBResponse[1].children[19].textContent',
SMMRY_com: '"SMMRY.com", infiniteResponse[1].children[language].children[20].innerHTML, "Images\smmry.com.jpg", searchBResponse[1].children[20].textContent',
Whatthefuckshouldimakefordinner_com: '"Whatthefuckshouldimakefordinner.com", infiniteResponse[1].children[language].children[21].innerHTML, "Images\Whatthefuckshouldimakefordinner.com.jpg", searchBResponse[1].children[21].textContent',
Coolors_co: '"Coolors.co", infiniteResponse[1].children[language].children[22].innerHTML, "Images\Coolors.co.jpg", searchBResponse[1].children[22].textContent',
Numbeo_com: '"Numbeo.com", infiniteResponse[1].children[language].children[23].innerHTML, "Images\Numbeo.com.jpg", searchBResponse[1].children[23].textContent',
Doesthedogdie_com: '"Doesthedogdie.com", infiniteResponse[1].children[language].children[24].innerHTML, "Images\Doesthedogdie.com.jpg", searchBResponse[1].children[24].textContent',
Online_Convert_com: '"Online-Convert.com", infiniteResponse[1].children[language].children[25].innerHTML, "Images\Online-Convert.com.jpg", searchBResponse[1].children[25].textContent'
}

var infiniteResponse= Object.keys(infiniteResponseAAA).sort();

var sitesOnPage = [];


var brLength= document.querySelectorAll("br").length;
var whereToAddIt= document.querySelectorAll("br")[brLength-1];


var observer = new IntersectionObserver(function(entries){
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            getDataInfiniteS();
        }
    });
});
observer.observe(whereToAddIt);


// Data checker
function getDataInfiniteS() {

    InfiniteScrolling();

}

// Actual script
function InfiniteScrolling() {

    var code;

    // It gets the first 5 sites that are already on the page and puts them inside sitesOnPage
    if (sitesOnPage[0] === undefined) {
        var h2s= document.querySelectorAll("h2");
        infiniteResponseAAA[infiniteResponse[0]].split(",")[0].replace(/["]/g, "");

        for (var i=0; i < h2s.length; i++) { 

            if (h2s[i].innerHTML === infiniteResponseAAA[infiniteResponse[i]].split(",")[0].replace(/["]/g, "")) sitesOnPage.push(i);

        }
    }


    function randomSiteInfosF(siteN) {

        // Checks if it's a number and not a string or something else
        if (typeof siteN !== "number") return;


        siteChecker_RNG(siteN)


        // Infos about the site: title              
        eval(`siteInfo${siteN}= infiniteResponseAAA[infiniteResponse[${eval(`randomSite${siteN}`)}]].split(",")`);
        eval(`siteTitle${siteN}= siteInfo${siteN}[0].replace(/["]/g, "")`);

    }


    function siteChecker_RNG(siteN) {

        var sitesAvailable= infiniteResponse.length;
        var h2s= document.querySelectorAll("h2");
        var randomSiteN= Math.floor(Math.random() * sitesAvailable);

        //  Return if all sites are loaded
        if (h2s.length === sitesAvailable) return;


        // Checks if the random number is a correct one
        for (var i= 0; i < sitesOnPage.length; i++) {

            if (randomSiteN === sitesOnPage[i]) {

                siteChecker_RNG(siteN)

            } else continue;

        }

        eval(`randomSite${siteN}= randomSiteN`);

    }


    var howManySitesPerLoad= 3;


    for (let i= 0; i < howManySitesPerLoad; i++) {
        randomSiteInfosF(i);
    }



    // Creates a new div for the sites loaded from the database
    if (document.getElementById("InfiniteScrollingID") === null) {

        whereToAddIt.insertAdjacentHTML("afterend", "<div id='InfiniteScrollingID'></div>");

    }


    for (let i= 0; i < howManySitesPerLoad; i++) {

        code= `${eval(`siteTitle${i}`)}\n</br></br></br>`

        document.getElementById("InfiniteScrollingID").insertAdjacentHTML("beforeend", code);

    }

    for (var i=0; i < howManySitesPerLoad; i++) {

        sitesOnPage.push(eval(`randomSite${i}`))

    }

    brLength= document.querySelectorAll("br").length;
    whereToAddIt= document.querySelectorAll("br")[brLength-1];

    observer.disconnect()
    observer.observe(whereToAddIt)

}

This is a re-post since nobody answered me before when i provided a working minimal example and this script is super important for my site.

This is part of code that is used for my site in its sections, http://www.coolwebsites.ml/

https://youtu.be/QDrn_9svt6Y

CodePen: https://codepen.io/Attisalva/pen/pojdZXr?editors=1010

In the CodePen example (same problem), it creates (in this case title names to simplify the code) some title names that are already on the page and it should only create titles that aren't yet created (you can find titles in the object "infiniteResponseAAA").

I'm trying to lazy loading new images, titles, descs, etc randomly on the page but it keeps creating without checking properly if everything is already on page.