Динамическое добавление срок таблицы по клику

Реализовал js метод, который должен вставлять кусок html кода в tbody для добавления новых строк. Скрипты подключил, однако "магии" не происходит. Прошу помочь разобраться, где я накосячил...

Подключаю свой js (строка в самом конце шаблона html, если это важно)

<script src="{% static 'custom/js/custom_js.js' %}"></script>

Кусок html целевой страницы

<table class="table table-borderless" id="ItemInRecipTable">
            <thead class="table-info">
                <tr>
                    <th>Ингридиенты</th>
                    <th>Количество (гр.)</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>
                        <select name="item-choice" class="form-control">
                            {% for item in items %}
                                <option value={{ item.id }}>{{ item.name }}</option>
                            {% endfor %}
                        </select>
                    </td>
                    <td>
                        <input type="number" name="amount-item-1" class="form-control">
                    </td>
                </tr>
            </tbody>

        </table>

        <br>
        <input type="button" class="btn btn-warning" id="addrow" onclick="AddRow()" value="Добавить ингридиент" />

Вот код js

var i = 1;
function AddRow() {
  i++;
  $('#ItemInRecipTable').find('tbody').append('<tr><td><select name="item-choice" class="form-control">{% for item in items %}<option value={{ item.id }}>{{ item.name }}</option>{% endfor %}</select></td><td><input type="number" name="amount-item-'+ i +'" class="form-control"></td></tr>');
}