Can any one help with the dynamic collapse in a repeat

Have a table with a repeat on it and below a dynamic collapse, I want it so when you click the row it toggles the dynamic collapse for that row.
I have added the $index but for some reason it comes up with an error, can anyone see where I have gone wrong with this please

<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="view_currently_training.data.query1" id="tableRepeat1" key="$index">
				<tr class="mouse" dmx-on:click="details_{{$index}}.show()" data-toggle="collapse">
					<td dmx-text="">
						<img width="40px" class="img-fluid rounded-circle" dmx-bind:src="image">
					</td>
					<td dmx-text="{{fName}} {{lName}}" class="cellmiddle"></td>
					<td dmx-text="tel" class="cellmiddle"></td>
					<td dmx-text="start_date" class="cellmiddle"></td>
					<td dmx-text="trainerName" class="cellmiddle"></td>
					<td class="cellmiddle">
						<div class="progress">
							<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="6" class="pt-0 pb-0">
						<div class="collapse" is="dmx-bs4-collapse" dmx-bind:id="details_{{$index}}">
							<p>Collapse body text goes here.</p>
						</div>
					</td>
				</tr>
			</tbody>