to filter multiple rows on button click - laravel

I have a table with student details and I want to filter each row. Like when "ID" and "Name" is entered and filter button is clicked the row with that details has to be displayed. I tried using JavaScript it does filter single rows separately. Is there any approach where I can filter them together or how can I write one single function for separate filter textboxes.

<thead>
  <th>
    <input
      type="text"
      id="myInput1"
      class="form-control filter-input"
      placeholder="Search by ID..."
      data-column="0"
    />
  </th>

  <th>
    <input
      type="text"
      id="myInput"
      onkeyup="myFunction()"
      class="form-control filter-input"
      placeholder="Search by Name..."
      data-column="1"
    />
  </th>

  <th>
    <input
      type="text"
      id="myInput2"
      onkeyup="myFunction2()"
      class="form-control filter-input"
      placeholder="Search by YOP..."
      data-column="3"
    />
  </th>

  <th>
    <input
      type="text"
      id="myInput3"
      onkeyup="myFunction3()"
      class="form-control filter-input"
      placeholder="Search by Status..."
      data-column="4"
    />
  </th>

  <th>
    <button
      onclick="myFunctionID()"
      class="btn btn-success btn-block mobile-width"
    >
      <i class="fa fa-filter"></i> Filter
    </button>
  </th>
</thead>

<script>
  function myFunction() {
    var input, filter, table, tr, td, i, txtValue

    input = document.getElementById("myInput")
    filter = input.value.toUpperCase()
    table = document.getElementById("myTable")
    tr = table.getElementsByTagName("tr")

    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"
        }
      }
    }
  }

  function myFunctionID() {
    var input, filter, table, tr, td, i, txtValue

    input = document.getElementById("myInput1")
    filter = input.value.toUpperCase()
    table = document.getElementById("myTable")
    tr = table.getElementsByTagName("tr")

    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"
        }
      }
    }
  }
</script>

I have used same function and have changed only the array index for each column.