remplacer les résultats d'une recherche fetch avec i.observer

bonjour à tous, j'ai un petit problème,sur mon site lorsque l'utilisateur arrive, par défaut j'afffiche des images d'immeubles grace a une requete fetch ensuite j'utilise intersection observer pour en afficher plus au fur et a mesure qu'il scroll,et sa fonctionne;lorsqu'il décide de cliquer sur afficher les maisons pareil grace a fetch et intersection observer les images sont bel et bien afficher,le problème est que les images précédantes d'immeubles sont toujours là alors que je souhaiterais qu'elles disparaissent pour laisser place qu'aux maisons, en je ne m'y prends pas de la bonne manière, meerci pour votre aide...

//le code pour les immeubles
let currentPage=1;
let loading = false;
const contentDiv= document.getElementById('scroller');
const loadingDiv = document.getElementById('target');

const getPosts = async (page) => {
    try {
        let response = await fetch(`https://rentals.com/rentals/recent-posts-building.php?_page=${page}`);
        if (!response.ok) {
            throw new Error("HTTP error! Status: " + response.status);
        }
        return await response.json();
    } catch (e) {
        throw new Error("Failed to fetch services: " + e.message);
    }
}

const appendData = (data) => {
    data.forEach(item => {
        const div = document.createElement('div');
        div.className = 'card-container';
        div.innerHTML = `<div class="image-section">
                <img src="https://placehold.co/801x400" alt="">
            </div>
            <div class="text-content">
                <span>${item.nom}&nbsp${item.prenoms}&nbsp</span>
                <span>dont le mail est ${item.mail} habite à ${item.ville}, ${item.commune}</span>

                <p>${item.bio}&nbsp;${item.nom}&nbsp${item.prenoms}&nbsp</p>
                <button class="btn">Plus de détails</button>

            </div>`;
        contentDiv.appendChild(div);
    });

const observer = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting && !loading) {

        console.log(entries)

        loading = true;
        currentPage++;
        try {
            const data = await getPosts(currentPage);
            appendData(data);
        } catch (e) {
            console.log(e.message);
        }
        loading = false;
    }
}, { threshold: 1.0 });

observer.observe(loadingDiv);

window.addEventListener('DOMContentLoaded', async () => {
    try {
        const posts = await getPosts(currentPage);
        if (posts) {
            appendData(posts);
        } else {
            console.log('posts not found or undefined');
        }
    } catch (e) {
        console.log(e.message);
    }
});

// le code pour les maisons

let currentPagehouses=1;
let loadinghouses = false;
const contentDivhouses= document.getElementById('scroller');
const loadingDivhouses = document.getElementById('target-houses');

const getPostshouses = async (page) => {
    try {
        let response = await fetch(`https://rentals.com/houses/recent-posts-sugarhouses.php?_page=${page}`);
        console.log(page);
        if (!response.ok) {
            throw new Error("HTTP error! Status: " + response.status);
        }
        return await response.json();
    } catch (e) {
        throw new Error("Failed to fetch services: " + e.message);
    }
}

const appendDatahouses = (data) => {
    data.forEach(item => {
        const div = document.createElement('div');
        div.className = 'card-container';
        div.innerHTML = `<div class="image-section">
                <img src="https://placehold.co/801x400" alt="">
            </div>
            <div class="text-content">
                <span>${item.nom}&nbsp${item.prenoms}&nbsp</span>
                <span>dont le mail est ${item.mail} habite à ${item.ville}, ${item.commune}</span>

                <p>${item.bio}&nbsp;${item.nom}&nbsp${item.prenoms}&nbsp estime que la somme de ${item.argent}&nbsp frcfa par mois est une somme raisonnable comme argent de poche;
                et pour un premier rdv : ${item.first_date}</p>
                <button class="btn">Plus de détails</button>

            </div>`;
        contentDivhouses.appendChild(div);
    });
}

const observerhouses = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting && !loadinghouses) {

        console.log(entries)

        loadinghouses = true;
        currentPagehouses++;
        try {
         const data = await getPostshouses(currentPagehouses);
            appendDatahouses(data);
        } catch (e) {
            console.log(e.message);
        }
        loadinghouses = false;
    }
}, { threshold: 1.0 });

//le code pour les boutons de selection

const categs = Array.from(document.querySelectorAll(".category"));

categs.forEach((categ) => categ.addEventListener("click", toggleSelected));

function toggleSelected() {
    console.log("Voici la catégorie :", this.dataset.categ);
    categs.forEach((categ) => categ.classList.toggle("selected"));
    let categorie2 = document.getElementById('categorie2');
    let categorie1 = document.getElementById('categorie1');
    if (categorie1.getAttribute('class') == "category selected") { console.log('buildings selected'); }

    if (categorie2.getAttribute('class') == "category selected") { console.log('houses selected'); observer.unobserve(loadingDiv);
        getTheHouses();
    }

}
async function getTheHouses(){
        try {
        const posts = await getPostshouses(currentPagehouses);
        if (posts) {
            appendDatahouses(posts);
        } else {
            console.log('posts not found or undefined');
        }
    } catch (e) {
        console.log(e.message);
    }
}```