Python Flask collapsible/expandable dynamic table

I am building a table in flask with rows that are collapsible. A row may have several elements underneath it that will all collapse on clicking. It works fine if I just hardcode values but when I am populating the table using a loop with data from a python dictionary, it does not work. The first row’s first child collapses instead of all the correct row’s children collapsing. Below should be sufficient code to reproduce the issue.
elements is a dictionary where key is a string and value is a list of tuples.

<table>
<thead>
<tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
</tr>
</thead>
{%for k, v in elements.items()%}

<tbody>
<tbody class="labels">
<tr>
    <td colspan="5">
        <label for="i">{{k}}</label>
        <input type="checkbox" name="i" id="i" data-toggle="toggle">
    </td>
</tr>
</tbody>

{%for desc in v%}
<tbody class="hide">
<tr>

    <td>{{desc[0]}}</td>
    <td>{{desc[1]}}</td>
    <td>{{desc[2]}}</td>
    <td>
        <button>trigger</button>
    </td>
    <td>{{desc[3]}}</td>
</tr>
</tbody>
{% endfor %}

</tbody>
{% endfor %}

<script>
    $(document).ready(function() {
    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
    });

</script>