Django и JavaScript: фильтрация не работает, приостановлена ​​на исключение

Question

Я пытаюсь отфильтровать таблицу по названию комнаты записей, которые есть в каждой строке.Строки моей таблицы выглядят так:

 <tr data-room="{{ record.room.room_name|lower|field_name_format}}">

Итак, когда пользователь проверяет кухню, в таблице отображаются строки, относящиеся к кухне, а не строки, относящиеся к другим комнатам.

И этокод в заголовке моего HTML:

{% for room in user_related_rooms %}
    document.querySelector('#{{room.room_name|lower|field_name_format}}').addEventListener('change',function (evt) {
    updateTableView("{{room.room_name|lower|field_name_format}}", evt.target.checked);
  });
{% endfor %}


function updateTableView(room_name, bVisible) {
    var dataSelectorVal = "";
    switch (room_name) 
    {
        {% for room in user_related_rooms %}
            case "{{room.room_name|lower|field_name_format}}":
            dataSelectorVal = ".site-table tbody tr[data-room='{{room.room_name|lower|field_name_format}}']";
            break;

          {% endfor %}
    }
    $(".site-table tbody tr").has(dataSelectorVal).css('display', bVisible ? "" : "none");
}

Вот код фильтра:

 <!-- Filters -->
    <div class="col-md-1">
        <h1>Filters</h1>
        <form>
            <span> by room:</span>
            <div  class="side-filter-list">
                <ul>
                {% for room in user_related_rooms %}
                    <li class="flex-field">

                        <input type="checkbox" id="cb_{{room.room_name|lower|field_name_format}}" />
                        <label for="{{room.room_name}}">{{room.room_name}}</label>
                    </li>
                {% endfor %}
                </ul>
            </div>
        </form>
    </div>

Браузер делает паузу на исключение.В этой строке я получаю сообщение об ошибке: living_room - первая комната в цикле (т.е. первая итерация цикла):

document.querySelector( '#cb_living_room' ).addEventListener('change', function (evt) {

Кажется, что приведенная выше строка возвращает ноль, тогда как когда я закомментирую код и используюконсоль ищет его, находит его без жалоб:

document.querySelector( '#cb_living_room')

Консоль выдает мне вывод:

<input id="cb_living_room" type="checkbox">

Что я делаю не так?Что происходит?