Wrong {{tag}} value in template

Using Django Templates & Frontend
1

The following code generates a table of rows with member data, e.g. name, phone, etc. The row contains a <div> that creates a modal edit box.

The first use of {{member.name}} (inside the <td>) displays the correct member name, but the second one (inside the <input> tag) always displays the member name for the first item in the members list, not the current iteration. In other words, assume the table shows rows for “Bob”, “Sue”, and “Mary”. Tapping the edit button on the Bob row displays the modal dialog with Bob’s info; but tapping on the Sue or Mary row also displays Bob’s info.

{% for member in members %}
<tr>
	<td class="member-table-data">{{member.name}}</td>

	<td class="member-table-data">{{member.phone}} 
		<img src="{% static 'tss/images/sms_icon.png' %}" class="sms-button">
	</td>

	<td class="member-comment">{{member.comment|default_if_none:""}}</td>

	<td>
		<button onclick="document.getElementById('modal').style.display='block'" class="button">edit</button>

		<div class="w3-container">
		  <div id="modal" class="w3-modal">
		    <div class="w3-modal-content">
		      <div class="w3-container">

		      	<form method="POST">
					<input type="text" name="name" value="{{member.name}}"><br>
					<input type="text" name="phone" value="{{member.phone}}"><br>
					<input type="text" name="comment" value="{{member.comment}}">
				</form>

		        <button class="button"  onclick="document.getElementById('modal').style.display='none'">Save</button>
		        <button class="button"  onclick="document.getElementById('modal').style.display='none'">Cancel</button>

		      </div>
		    </div>
		</div>

	</td>
</tr>
{% endfor %}
2

You’re generating invalid HTML here.

The id attribute of an element must be globally unique. You are generating an id="modal" for every <td> element, which is wrong. You need to generate individual id attributes for each element.

It’s not that the wrong values are being generated, it’s that your reference to document.getElementByID('modal') is always going to find the first element in the document by that name.

3

Thanks, that makes sense. There might be a cleaner way to do it, but I changed modal to modal{{member.id}} and that worked.