Table Dropdown Filter with jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
    function addRemoveClass(theRows) {
        theRows.removeClass("odd even");
        theRows.filter(":odd").addClass("odd");
        theRows.filter(":even").addClass("even");
    }
    var rows = $("table#myTable tr:not(:first-child)");
    addRemoveClass(rows);
    $("#dropdownField").on("change", function() {
        var selected = this.value;
        if (selected != "All") {
            rows.filter("[position=" + selected + "]").show();
            rows.not("[position=" + selected + "]").hide();
            var visibleRows = rows.filter("[position=" + selected + "]");
            addRemoveClass(visibleRows);
        } else {
            rows.show();
           addRemoveClass(rows);
        }
    });
});

</script>

app.component.html

<div class="dropdownList">
  Filter By Name
  <select id="dropdownField">
      <option value="All" selected>All</option>
      <option value="Student">Student</option>
      <option value="Assistant">Assistant</option>
   
  </select>

</div>
<table id="myTable">
  <tr id="headerRow">
      <td>First Name</td>
       <td>Age</td>
      <td>Position</td>
  </tr>

  <tr position="Student">
      <td>John</td>
       <td>25</td>
      <td>Student</td>
  </tr>

 
  <tr position="Professor">
      <td>Olivia</td>
       <td>25</td>
      <td>Professor</td>
  </tr>

  <tr position="Professor">
      <td>Ava</td>
       <td>21</td>
      <td>Professor</td>
  </tr>

  <tr position="Student">
      <td>Sophia</td>
       <td>20</td>
      <td>Student</td>
  </tr>

</table>

styles.css
body{
  font-family: Arial, Helvetica, sans-serif; font-size:28px;
}
#myTable{
  width:100%;
  border-collapse:collapse;
  }
  #headerRow {
    background: #2700ff;
    color: white;
    font-weight: bold;
}
  #myTable td{
  padding:5px;
  border:1px solid #00a5e4;
  text-align:left;
  }
  .dropdownList {
  padding-bottom:10px;
  font-weight:bold;
  }
  #dropdownField {
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    height: 30px;
    width: 200px;
    color: white;
    background-color: #2700ff;
}
.odd {
  background: #cceaff;
}
.even {
  background: #99e3ff;
}