How to access all foreach loop data in JS from laravel blade?

I am displaying data in foreach loop in laravel blade where I only display ten records per page and I have used pagination for showing all records. Now I want to develop a search or filter functionality in the table but the search can only be applied on one page of the pagination. Is there any way to access all the foreach loop data in the script tag?

Here is my foreach loop and links for pagination:

<tbody>
                         @foreach($books as $book)
                            <tr>
                                <td>{{ $book->isbn }}</td>
                                <td><a href="{{ route('books.show', $book->id) }}">{{ $book->name }}</a></td>
                                <td>{{ $book->sale_price }}</td>
                                <td>{{ $book->stock }}</td>
                                <td>{{ Str::limit($book->description, 10) }}...</td>
                                <td>{{ $book->category->name }}</td>
                                
                                <td class="text-center">
                                    <ul class="icons-list">
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-menu9"></i>
                                            </a>

                                            <ul class="dropdown-menu dropdown-menu-right">
                                                <li><a href="{{ route('books.edit', $book->id) }}"><i class="icon-pencil7"></i>Edit</a></li>
                                                
                                                <li><a href="{{ route('books.changePdf', $book->id) }}"><i class="icon-file-pdf"></i>Change PDF File</a></li>
                                                
                                                <li><a href="#" data-toggle="modal" data-target="#modal_theme_danger_{{ $book->id }}">
                                                    <i class="icon-bin"></i>Delete PDF</a>
                                                </li>

                                                
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                           @endforeach
</tbody>  
<div class="text-center">{{ $books->links() }}</div>  

Here is the textbox for search functionality:

<div class="row">
  <div class="col-sm-6">
    <label for="txtSearch">Search:</label>
    <input type="text" id="txtSearch" name="txtSearch" class="search form-control" onkeyup="myFunction()">  
  </div>
</div>  

Here is my JS code:

<script type="text/javascript">
function myFunction() {
          // Declare variables
          var input, filter, table, tr, td, i, txtValue;
          input = document.getElementById("txtSearch");
          filter = input.value.toUpperCase();
          table = document.getElementById("tblSearch");
          tr = table.getElementsByTagName("tr");

          // Loop through all table rows, and hide those who don't match the search query
          for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
              txtValue = td.textContent || td.innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
              } else {
                tr[i].style.display = "none";
              }
            }
          }
        }
    </script>  

The script can search for the given data in the current page of the pagination but cannot apply the search on all the data of the pagination. Any help is appreciated in advance.