When looping through a list to create a table of information and offcanvas menus that display additional details when a table row <tr> is clicked, I am encountering the "parentNode" error. I'm unsure why this error is happening.
The <tr> element has a "data-bs-target" attribute pointing to the correct "id" for the Offcanvas feature, but it seems to be unable to locate the parentNode.
<table class="table table-hover table-sm" id="t1">
<thead class="table-secondary">
<th scope="col" class="name">
Host Name
</th>
<th scope="col" class="ip_address">
IP Address
</th>
...
</thead>
<tbody class="lan-table">
{% for host in hosts %}
<tr class="host-row" data-view='host' data-bs-toggle="offcanvas" data-bs-target="#{{host.fqdn}}-host-details">
<td class="host-fqdn"></td>
<td class="host-ip-address"></td>
...
</tr>
{% endfor %}
</tbody>
</table>
...
{% for host in hosts %}
<div class="offcanvas offcanvas-end w-25" data-bs-scroll="true" tabindex="-1" id="{{host.fqdn}}-host-details" style="min-width: 400px;">
...
</div>
{% endfor %}
Here is a screenshot showing the correct generation of the page. Please note that I have obscured my domain name for security reasons as it includes fqdn information. See Static HTML Page