How to go through <c:foreach> and do a search bar from all the data?

Question

I’m trying to put a search bar on the site using javascript, but it only searches the words I insert in the field in the first object added and not at all...

My JSP:

<ul class="list-group-item list-group-item-warning" id="myUL">

    <li class="list-group-item list-group-item-warning active">${fornecedor.nome}</li>

    <li class="list-group-item list-group-item-warning">Produto: ${fornecedor.produto}</li>

    <li class="list-group-item list-group-item-warning">Categoria: ${fornecedor.categoria}</li>

    <li class="list-group-item list-group-item-warning">Segmento: ${fornecedor.segmento}</li>

    <li class="list-group-item list-group-item-warning">Localidade: ${fornecedor.local}</li>

    <li class="list-group-item list-group-item-warning">Departamento: ${fornecedor.departamento}</li>

    <li class="list-group-item list-group-item-warning">Seção: ${fornecedor.secao}</li>

    <li class="list-group-item list-group-item-warning">Grupo: ${fornecedor.grupo}</li>

    <li class="list-group-item list-group-item-warning">SubGrupo: ${fornecedor.subGrupo}</li>


        <a href="${urlVisualizarContato}/?id=${fornecedor.id}">
            <li class="list-group-item">Ver Contatos | Adicionar Contato
                    </h4>
            </a>


<li class="list-group-item list-group-item-warning"><a href="${FornecedorEditar}/?id=${fornecedor.id}" class="btn btn-danger">EDITAR</a></li>
        </ul>

    </c:forEach>

My Archbar (which in case is working):

<div class="searchbar">
            <input class="search_input" type="text" id="myInput" placeholder="Pesquisar..">

        </div>

My Javascript (which is only searching in the first object/vendor of the list):

<script>

    window.addEventListener("load", function() {
        alert("função rodou");

        const list = document.querySelector('#myUL');
        const searchBar = document.getElementById('myInput');

        if (searchBar) {
            alert("input n ta nulo galer");
            searchBar.addEventListener('keyup', function(e) {

                const term = e.target.value.toLowerCase();
                const fs = list.getElementsByTagName('li');

                Array.from(fs).forEach(function(f) {
                    const nome = f.textContent;



                    if (nome.toLowerCase().indexOf(term) != -1) {
                        f.style.display = 'block';
                    } else {
                        f.style.display = 'none';
                    }

                })

            })
        }
    })
</script>