So here we have the code I have been using from the W3C school example. It only searches values in the first column, but not in the surname, email and phone number columns. Is there any work around to this problem. I know the php is not as secure as it should be, but I am just trying to display values on a offline website.

function Search() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("input");
    filter = input.value.toUpperCase();
    table = document.getElementById("table");
    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")[0];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }

  <?php
    $conn = new mysqli("localhost","root","","taw") or die(mysqli_error($conn));
    $query = mysqli_query($conn, "SELECT FIRST_NAME, LAST_NAME, EMAIL, PHONE_NUMBER FROM user") or die(mysqli_error($conn));
    print("<form class='table_form' action='html-4column.php' method='post'>");
    print("<table id='table' border='1'>");
    print("<div class='scroll'>
           <tr><td>First Name</td>
           <td>Surname</td>
           <td>Email</td>
           <td>Phone Number</td>
           </tr>");
    while ($row = mysqli_fetch_array($query)) {
        printf("
           <td>".$row['FIRST_NAME']."</td>
           <td>".$row['LAST_NAME']."</td>
           <td>".$row['EMAIL']."</td>
           <td>".$row['PHONE_NUMBER']."</td>
           </tr></div>");
       }
       print("</table></form>");
    ?>