For loop in html gives me the same id

When I click the span on html I cant make variable span id with id="mylink-${i}" I couldn't get this with var mylink = document.getElementById("mylink-"+id) in javascript part.

and also at onclick="theFunction(i)" console gives me i is not defined error but it should be defined because of {% for i in data %} i is one of the elements of data

    <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>
Back to Top