My loadall function works but my line by line loadEmployeeData function is not working for one function but not an other?

So loadAllEmployeeData works but for some reason and renders correctly in my webpage but the loadEMployeeData one just does nothing…I think it may have to do with the const employeeDbArray?

document.addEventListener('DOMContentLoaded', function() {
    renderAlphabetLinks();
});

document.addEventListener('DOMContentLoaded', function() {
    myTime();
});

function renderAlphabetLinks() {
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const container = document.getElementById('alphabetLinks');
    let html = '';
    for (let letter of alphabet) {
        html += `<a href="#" onclick="loadEmployeeData('${letter}')">${letter}</a> `;
    }
    html += `<a href="#" onclick="loadAllEmployeeData()">ALL</a>`;
    container.innerHTML = html;
}

async function loadEmployeeData(letter) {  
    try {
        const response = await fetch('/employees');
        const data = await response.text();
        const employeeDbArray = data.split("n").filter(name => name.toUpperCase().startsWith(letter));
        const targetDiv = document.getElementById('employeeList');
        targetDiv.innerHTML = employeeDbArray.join('<br>');
    } catch (error) {
        console.error('Error fetching employee data:', error);
    }
}

async function loadAllEmployeeData() {
    try {
        const response = await fetch('/employees');
        const data = await response.text();
        const targetDiv = document.getElementById('employeeList');
        targetDiv.innerHTML = data.split("n").join('<br>');
    } catch (error) {
        console.error('Error fetching all employee data:', error);
    }
}


}