Показать/скрыть элементы списка HTML на основе результатов ajax

Я запускаю файл PHP, который использует JavaScript для добавления в список элементов, извлеченных из базы данных sql. Фильтр поиска не влияет на элементы, взятые из базы данных sql. Как я могу добавить элементы sql в ul, чтобы они правильно фильтровались?

Index.php, HTML-код, содержащий «зашитые» элементы — элементы 1 и 2.

<section>
    <h2>Item Selection</h2>
    <form>
        <input type = "text" id = "itemSearch" placeholder = "Search for items">
    </form>
    <ul id = "itemList">
        <li>
            <span>Item 1</span>
        </li>
        <li>
            <span>Item 2</span>
        </li>
    </ul>
</section>

Index.php, PHP-код, который добавляет элементы из sql в ul

fetch('get_data.php')
.then(response => response.json())
.then(data => {
    const itemList = document.getElementById('itemList');
    data.forEach(item => {
        const li = document.createElement('li');
        li.innerHTML = "<span></span>";
        li.querySelector('span').textContent = item['ItemName'];
        itemList.appendChild(li);
    });

Index.php, js-код, фильтрующий список

const itemList = document.getElementById('itemList');
const items = itemList.querySelectorAll('li'); 
const itemSearchInput = document.getElementById('itemSearch');

// Filter item list based on search input
itemSearchInput.addEventListener('input', function() {
    const searchQuery = itemSearchInput.value.trim().toLowerCase();
    items.forEach(item => {
        const itemName = item.querySelector('span').textContent.toLowerCase();
        if (itemName.includes(searchQuery)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
});