Django Tag binding

Question

Here is the part of my home.html file.

{% for x in items %}
      <div class="box-design" data-toggle="modal" data-target="#myModal">
             <p>{{ x.name }} - {{ x.created|date:"D d M Y" }}</p>
             <p>{{ x.title }}</p>
       </div>
         <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">{{ x.title }}</h4>
                            </div>
                            <div class="modal-body">
                                <p>{{ x.description }}</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <hr/>
       {% endfor %}

What the above code does is, it iterates over the items passed to the items list and put the value of name, created, title attributes inside a div tag for each corresponding item.

So , if I click the corresponding div tag, it further invokes the tag which contain myModal as id value. At present, div tag which has the class box-design displays the values as it is, ie one by one. But when I click on the generated div, it display the values of first item on clicking the second div tag.

So, we need to implement a method for linking these two tags and passing the corresponding item from first box-design div to myModal div inorder to display the corresponding item's value.

Answer 1

Use id="myModal-{{ forloop.counter }}" and data-target="#myModal-{{ forloop.counter }}" to create different id's for each element.