Django: object attribute showing different values

Question

So this looks like a lot of code, but I only really care about the two lines where I put arrows.

This code snippet is from a template (html) file.

solutions_newest is an array full of "solution" objects. A "solution" has an attribute called "id". {{ solution.id }} accesses the id of a solution.

The two lines where I put arrows are in the same for loop, so it should be accessing the same solution at a given time. However, when I display {{ solution.id }} in both these lines, the first line displays the id of the selected puzzle, and the second line always displays the id of the first puzzle of the "solutions" array.

How can this be?

I suspect that I am not fully understanding how Bootstrap modals work, but to be honest I have no idea why {{ solution.id }} is showing different ids in the two lines with arrows.

            {% for solution in solutions_newest %}
        <div class="card bg-light">
            <div class="card-header subtitle">
                <div class="triple-left">{{ solution.datetime }} by
                    <a href="{% url 'profile' username=solution.user.username %}">{{ solution.user.username }}</a>
                </div>
                {% if user == solution.user or user.profile.teacher %}
                <div class="triple-right">
                    <a href="{% url 'edit_solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">edit</a>
                    &nbsp;&nbsp;
    --------------> <a class="text-danger" href="#" data-toggle="modal" data-target="#deleteSolutionNewest">{{ solution.id }}: delete</a>

                    <!-- Modal -->
                    <div class="modal fade" id="deleteSolutionNewest" tabindex="-1" role="dialog" aria-labelledby="deleteSolutionNewestLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                <h5 class="modal-title" id="deleteSolutionNewestLabel">Are you sure?</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                </div>
                                <div class="modal-body">
                                Once you delete a solution, you lose it forever.
                                </div>
                                <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                --------------> <a href="{% url 'delete_solution' puzzleID=solution.puzzle.id solutionID=solution.id %}" class="btn btn-danger">{{ solution.id }}: Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                {% endif %}
                <div class="triple-center points">
                    <a class="block-link" href="{% url 'solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">&uArr;</a>
                    &nbsp;&nbsp; {{ solution.points }} &nbsp;&nbsp;
                    <a class="block-link" href="{% url 'solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">&dArr;</a>
                </div>
            </div>
            <a class="block-link" href="{% url 'solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">
                <div class="card-body">
                    <h5 class="card-title">{{ solution.title }}</h5>
                    <p class="card-text">{{ solution.content | markdown | safe }}</p>
                </div>
            </a>
        </div>
        <br>
        {% endfor %}

Any help is appreciated. Thank you!

Answer 1

In HTML Element IDs SHOULD be unique within the entire document. I suspect the problem is caused by having multiple objects with the same id, because having a tag with id="deleteSolutionNewestLabel" in your for loop will result in several tags with the id deleteSolutionNewestLabel.

The html 5.1 spec says getElementById must return the first element with the given ID, so the behavior you see is not unexpected. Most (if not all) browsers have and still do select the first element with a given ID, when calling getElementById. Most libraries that find elements by ID inherit this behavior. Check "Can multiple different HTML elements have the same ID if they're different elements?"

Try to replace all instances of id="deleteSolutionNewestLabel" with id="deleteSolutionNewestLabel-{{ forloop.counter }}" and let me know if it fixes the problem.