I am trying to implement a very basic search engine. I iterate through an array of objects, checking if my search term matches some attributes, and if it does, I push each matching object onto an array. Now, in the rest of my code I have it so each object is represented by an element, and each element has a checkbox. Each checkbox has an ID that matches its object's ID. So.... when I run the search function, I take the matches, correspond them to a checkbox through the IDs, and then I want to hide the elements that don't match.

The problem is: it hides ALL the elements, instead of just the non-matchings IDs. Furthermore, it works when I want to manipulate the matches (say, surround them in a white border).

function search() {
     var results = [];
     userData.forEach(task => {
         if (task.value.toLowerCase().includes(searchBar.value.toLowerCase()) 
             || task.note.toLowerCase().includes(searchBar.value.toLowerCase())) {
                 results.push(task.id);
             }
         })

         const checkboxes = document.querySelectorAll(".checkbox");

         checkboxes.forEach(checkbox => {
              if (!results.includes(checkbox.id)) {
                   checkbox.parentElement.style.display = "none";
              }
          })
     }
}