forloop.counter0 in my django template is not working under original for loop

I have a for loop that goes through a list of inspections. I’d like to manipulate the things inside the tag depending on different situations. For test, I tried to using jquery to print out the id of the element as it iterates, but the forloop seems to be stuck at 0. when I put inside the html it will iterate, but when I put inside the attribute ‘id’, it will not iterate. based on the code below, it should iterate as many times as there is i in inspections. but it wont. I also tried to get a console.log() fo the innerHTML of my but all I get is the first item repeated over and over instead of going down the list (on the webage however it looks lile it iterated ok, just not on the backend I guess?).
note that jquery was imported at the beginning of the html. this is just snippet of issue.

I’d appreciate any help.

my code:

<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>