Filtrer un tableau d'objet en JS et PHP

Bonjour,

J'essaye de filtrer les données de ma page web grâce à des menus déroulants. Pour cela j'utilise PHP qui va me permettre de récupérer les données dans un tableau initial et ensuite j'utilise la fonction filter() en JS qui va créer un nouveau tableau sans modifier l'initial avec les critère sélectionnés . J'obtiens comme résultat :

-- tableau initial  : j'ai toute les données 

-- nouveau tableau : vide 

en fonction des critères qu'on sélectionne au fur et à mesure je veux que les données s'affichent aussi au fur et à mesure mais je n'arrive pas à faire en sorte que le nouveau tableau ne soit pas vide.

Voici ce que j'ai fait :

fonction JS

function filtre(){
    var filtreRef = document.getElementById('reference').value;
    var id_etat = $("#tetatSelect").val();
    var id_emp = $("#templacementSelect").val();
    var id_prod = $("#tproduitSelect").val();
    var id_vehicule = $("#tvehiculeSelect").val();


    var donnees = [];
    $.ajax({
        cache: false,
        url: '../data/getAll',
        type: 'POST',
        async: true,
        data: ({
            table : "balancelles",
          
        }),
        success: function (response, status){
            donnees = JSON.parse(response);
            console.log(donnees);
            var newArray = donnees.filter(function(bal){
                return  bal.etat == id_etat && 
                bal.emplacement == id_emp && 
                bal.produit == id_prod && 
                bal.vehicule == id_vehicule &&
                bal.reference == filtreRef;
            });
            console.log(newArray);
            var liste = '';
            if(newArray.length != 0){
                newArray.forEach(ref => liste +='<tr id="'+ ref.id +'"><td>' + ref.reference + '</td><td>'+ ref.numero +'</td><td>' + ref.etat+ '</td><td>' + ref.emplacement + '</td><td>' + ref.produit + '</td><td>' + ref.vehicule + '</td><td> -  </td><td><img id="'+ ref.id +'" class="btnmodifRef" style="margin-left: 25px" data-toggle="tooltip" src="" onclick="modifier(this)" id="modifier"></img><img id="'+ ref.id +'" class="btnmodifRef" style="margin-left: 25px" data-toggle="tooltip" src="" onclick="supprimer(this)" id="supprimer"></img></td></tr>' );

                document.getElementById("ligneReference").innerHTML = liste;
            } else {
                var toAdd = "";
                toAdd = '<tr id="0"><td colspan="9" class="nomReference">Aucune référence disponible !</td></tr>';
                $("#ligneReference").html(toAdd);   
            }
        },
        
        error: function (response, status) {
            console.log(response);
            console.log(status);
        }
    });    
}

Ma requête sql selectionne seulement toutes les données se trouvant dans la table concernée

merci d'avance