Проблема с Javascript для цикла for (в сочетании с базой данных sqlite3)

Question

Я занимаюсь разработкой веб-приложения на python с использованием фляги и базы данных sqlite3. Это веб-приложение для анонимных отчетов в школах. В маршруте под названием tablatestigos я хочу отобразить таблицу с информацией базы данных. Один из заголовков таблицы - это выпадающее меню (например, заголовок Filter By), и если вы выберете, например, курс 5A, он должен отображать ТОЛЬКО строки таблицы этого курса, поэтому, когда я нажимаю на определенное «curso», оно показывает мне только строки за это. Я хотел, чтобы это произошло динамически, поэтому я добавил немного javascript, но так как я никогда не использовал этот язык (я новичок в кодировании и я пишу на python), у меня есть проблема в цикле for, потому что строки не скрываются, когда это необходимо. Я думаю, что есть проблема в переменных, которые я устанавливаю. Ошибка должна быть внутри функции (), потому что я пытался вставить в нее только предупреждение, и программа работала, но когда я добавляю все переменные и для циклов, это не

вот мой HTML-код со скриптом:

{% extends "layout.html" %}

{% block title %}
    Reportes de Testigos
{% endblock %}

{% block main %}

    <form action="/" method="post">
        <table class="table table-striped" id="myTable">
        <thead>
            <tr>
                <th>Escuela</th>
                <th>Curso</th>
                <th>Victima</th>
                <th>Descripción del hecho</th>
                <th>
          <!-- (con movimiento mouse)       <div class="dropdown">
  <button class="dropbtn">Cursos</button>
  <div class="dropdown-content">
    {% for hecho in hechos %}
    <a onclick="myFunction()" id="myInput" href="#">{{ hecho.curso }}</a>
{% endfor %}
  </div>
</div> -->
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Todos
                      <span class="caret"></span></button>
                      <div class="dropdown-content">
                        {% for hecho in hechos %}
                        <a onclick="return myFunction();" id="myInput" href="#">{{ hecho.curso }} </a>
                        {% endfor %}

                  </div>
                </th>

            </tr>
        </thead>

        <tbody>
<!--for is to loop in each row of the table of the selected database,you have to use { always with a space at left and right  and stock.nam the . because it is like opening a dict and chosing the column name -->

    {% for hecho in hechos %}
                <tr>
                    <td>{{ hecho.escuela }}</td>
                    <td>{{ hecho.curso }}</td>
                    <td>{{ hecho.victima }}</td>
                    <td>{{ hecho.hecho }}</td>

                </tr>
            {% endfor %}

        </tbody>
    </table>
    </form>

 <script>
    function myFunction() {
      // Declare variables
      var input, table, tr, td, i, txtValue;
    //  input = document.getElementById("myInput");
      table = document.getElementById("myTable");
      input = table.getElementById("myInput");
      tr = table.getElementsByTagName("tr");
      inputTwo = input.textContent || input.innerText;
      // Loop through all table rows, and hide those who don't match the dropdown query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase() == inputTwo) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }

      }
    }
    </script>
{% endblock %}

Извините, если это вопрос noob, но я никогда раньше не использовал javascript и на этот раз мне пришлось использовать его, чтобы продолжить мой проект:)