Forloop.counter0 в моем шаблоне django не работает в оригинальном цикле for

У меня есть цикл for, который проходит через список проверок. Я хотел бы манипулировать элементами внутри тега в зависимости от различных ситуаций. Для теста я попытался использовать jquery для вывода id элемента по мере итерации, но цикл forloop, похоже, застрял на 0. Когда я помещаю внутрь html, он будет итерировать, но когда я помещаю внутрь атрибут 'id', он не будет итерировать. Основываясь на коде ниже, он должен итерировать столько раз, сколько есть i в инспекциях. но он этого не делает. Я также пытался получить console.log() fo innerHTML моего, но все, что я получаю, это первый элемент повторяется снова и снова вместо того, чтобы идти вниз по списку (на веб-странице, однако, это выглядит так, как будто итерация идет нормально, просто не на бэкенде, я полагаю?). обратите внимание, что jquery был импортирован в начале html. это просто фрагмент проблемы.

Буду благодарен за любую помощь.

мой код:

<div class="tab-pane fade" id="nav-inspection" role="tabpanel"
                                 aria-labelledby="nav-inspection-tab">
                                <div class="container"></br></br>
                                    {% for i in inspections %}
                                        <div class="card - mb-3" style="width: 40 rem;">
                                            <div class="card-body">
                                                <h3 class="card-title">{{i.Title}} - <span title="" id="s{{forloop.counter0}}">{{i.Condition}}</span>
                                                </h3>
                                                <script type="text/javascript">
                                                    console.log(document.querySelector('[title]').innerHTML);
                                                    $(document).ready(function(){
                                                        alert($('[title]').attr("id"));
                                                    });
                                                </script>
                                                <p>{{i.Desc}}</p>
                                                <h4><span class="badge badge-primary">{{i.Cost}}</span></h4>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>

{% for i in inspections.all %}
                                        <div class="card - mb-3" style="width: 40 rem;">
                                            <div class="card-body">
                                                <h3 class="card-title">{{i.Title}} - <span title="inspection" id="s{{forloop.counter0}}" class="">{{i.Condition}}</span>
                                                </h3>
                                                <p>{{i.Desc}}</p>
                                                <h4><span class="badge badge-primary">{{i.Cost}}</span></h4>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    <script type="text/javascript">
                                        $(document).ready(function(){
                                            $("[title='inspection']").each(function(){
                                                if ($(this).html() == 'Poor'){
                                                    $(this).toggleClass("badge badge-danger");
                                                } else if ($(this).html() == 'Not Satisfactory') {
                                                    $(this).toggleClass("badge badge-warning");
                                                } else if ($(this).html() == 'Satisfactory'){
                                                    $(this).toggleClass("badge badge-success");
                                                }else if ($(this).html() == 'Not Inspected'){
                                                    $(this).toggleClass("badge badge-secondary");
                                                }
                                            });
                                        });
                                    </script>