I have rendered data(coffee recipes) via json server to my page(12 per page).When search for a coffee using the search bar it is able to find the coffee which is within that page but when i click the next button it is not able to find it.(in short it can only find the coffee present currently on the page how can i change this i want to search any coffee from my database

this is my code. i have rendered only 12 items per page

function search_coffee() {
  let input = document.getElementById('searchBar').value
  input=input.toLowerCase();
  let x = document.getElementsByClassName('coffee-card');
    
  for (i = 0; i < x.length; i++) { 
      if (!x[i].innerHTML.toLowerCase().includes(input)) {
          x[i].style.display="none";
      }
      else {
          x[i].style.display="list-item";                 
      }
  }
}
searchBar.addEventListener("keyup",search_coffee)