How to access a row which is dynamically created in GOHTML template? - go

Question

In my GOHTML file, I am dynamically creating table rows from the results using range. Further, I want to access each row for operations like edit or delete. For example: Click on a row should open a modal with its values. But, with my current implementation the modal is appearing only on the first row. Click doesn't work on rest of the rows.
Table :
<table>
{{range .Bdata}}
<tr class="buy" id="trx_buy">
<td>{{.Sname}}</td>
<td align="center">{{.Uprice}} </td>
<td align="center">{{.Qty}} </td>
<td align="center">{{.Bfee}}</td>
<td align="center">{{.Tprice}}</td>
<td align="center">{{.Fdate}}</td>
</tr>
{{end}}
</table>
<div class="modal-content">
<span class="close">×</span>
<p>{{.Sname}}, {{.Uprice}} </p>
</div>
</div>
Script to handle onclick :
<script>
// Get the modal
var modal = document.getElementById("myModal");
var tr_buy = document.getElementById("trx_buy");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
tr_buy.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Answer 1

Your problem is in var tr_buy = document.getElementById("trx_buy");. This will only give you the first matching element. You can use document.getElementsByClassName instead and add the onClick() listener to all the elements.