Query outputs are being mixed together from Lucee (CFML) when being fetched by javascript

I have the following code..

async function updateItems() 
{
    await fetch('http://127.0.0.1/WebProjects/LARPLookup/Actions/Game/Items.cfm')
    .then(response => response.text())
    .then((response) => {document.getElementById("nav-items").innerHTML = response;})
}

async function updateKnowledge() 
{
    await fetch('http://127.0.0.1/WebProjects/LARPLookup/Actions/Game/Knowledge.cfm')
    .then(response => response.text())
    .then((response) => {document.getElementById("nav-knowledge").innerHTML = response;})
}

async function updateRelationships() 
{
    await fetch('http://127.0.0.1/WebProjects/LARPLookup/Actions/Game/Relationships.cfm')
    .then(response => response.text())
    .then((response) => {document.getElementById("nav-relationships").innerHTML = response;})
}

async function updateSkills() 
{
    await fetch('http://127.0.0.1/WebProjects/LARPLookup/Actions/Game/Skills.cfm')
    .then(response => response.text())
    .then((response) => {document.getElementById("nav-skills").innerHTML = response;})
}

async function updateGoals() 
{
    await fetch('http://127.0.0.1/WebProjects/LARPLookup/Actions/Game/Goals.cfm')
    .then(response => response.text())
    .then((response) => {document.getElementById("nav-goals").innerHTML = response;})
}

async function updateBackground() 
{
    await fetch('http://127.0.0.1/WebProjects/LARPLookup/Actions/Game/Background.cfm')
    .then(response => response.text())
    .then((response) => {document.getElementById("nav-background").innerHTML = response;})
}



async function updateCharacterPages() 
{

    updateItems();
    updateKnowledge();
    updateRelationships();
    updateSkills();
    updateGoals();
    updateBackground();

}

Each of those pages pulls in the full HTML of the page and puts it into a div with that ID.

            <cfif Relationships.recordcount GT 0>
                <div class="tab-pane fade" id="nav-relationships" role="tabpanel" aria-labelledby="nav-relationships-tab">
                    <cfinclude template="Relationships.cfm">
                </div>
            </cfif>

            <cfif Skills.recordcount GT 0>
                <div class="tab-pane fade" id="nav-skills" role="tabpanel" aria-labelledby="nav-skills-tab">
                    <cfinclude template="Skills.cfm">
                </div>
            </cfif>

            <cfif Items.recordcount GT 0>
                <div class="tab-pane fade" id="nav-items" role="tabpanel" aria-labelledby="nav-items-tab">
                    <cfinclude template="Items.cfm">
                </div>
            </cfif>

The issue is that if I run this (using a setInterval of 8 seconds), it produces things like this.

<tr>
<td>Player B</td>
<td>It's a good town.</td> (This is a knowledge and it should be a relationship) 
</tr>

or

<tr>
<td></td>
<td>You really like this guy</td>
</tr>

Sometimes, it gets it right, but others, not so much.

Where should I start to look to get this fixed?

I tried slowing down the loop, but at 8 seconds for it to process and it still messing up, when I run this for 40-60 people, it will for sure fail.