Фильтр на несколько ячеек

<table id ='myTable' border="1">
 
            <tr><th>ФИО</th><th>Должность</th><th>Опыт</th></tr>
 
            <tr><th><input type="text" id="myInput" onkeyup="my_filter()" placeholder="ФИО"></th>
                <th><input type="text" id="myInput1" onkeyup="my_filter1()" placeholder="Должность"></th>
                <th><input type="text" id="myInput2" onkeyup="my_filter()" placeholder="Опыт"></th></tr>
 
            <script>
                function my_filter() {
                  
                  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")[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>
            
            {% for el in home %}
                <tr><td>{{ el.title}}</td><td>{{ el.post}}</td><td>{{ el.genExperience}}</td></tr>
            {% endfor %}
        </table>