Цикл for в html дает мне тот же id

Когда я нажимаю на span в html, я не могу сделать переменную span id с помощью id="mylink-${i}" Я не могу получить это с помощью var mylink = document.getElementById("mylink-"+id) в части javascript.

а также при onclick="theFunction(i)" консоль выдает мне ошибку i is not defined, но он должен быть определен, потому что {% for i in data %} i является одним из элементов данных

    <div class="row sideBar">
        {% for i in data %}

            <div class="row sideBar-body">
                
                <div class="col-sm-9 col-xs-9 sideBar-main">
                <div class="row">

                    <a   href= "{% url "start_chat" i.room %}" onclick="theFunction(i)" >
                    
                    <div class="col-sm-8 col-xs-8 sideBar-name">
                    
                    <span class="name-meta"  id="mylink-${i}"> {{i.name}} 
                    
                    </span>
                    
                    </div>
                </a>
                    
                </div>
                </div>
            </div>

        {% endfor %}

    </div>

Вернуться на верх