Data detail won't update on click

I was following this tutorial Displaying Record Details with the Data Detail Component and tried to achieve the same but in my case on click event won’t work and data is static with selected first item.

My code is bellow:

		<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="sc_get_all_events.data.query_get_all_events" id="tableRepeat2">
			<tr>
				<td dmx-text="name" dmx-on:click="data_detail1.select(id)"></td>
				<td dmx-text="date_time"></td>
				<td dmx-text="created_by"></td>
				<td dmx-text="created_datetime"></td>
			</tr>
		</tbody>
	</table>
</div>
<div class="col" is="dmx-data-detail" id="data_detail1" dmx-bind:data="sc_get_all_events.data.query_get_all_events" key="id">
	<div class="row">
		<div class="col-12">
			<p>{{data_detail1.data.name}}</p>
		</div>
		<div class="col-12"></div>
		<div class="col-12"></div>
		<div class="col-12"></div>
	</div>
</div>

data_detail1116×566 77.4 KB

Can some one please guide me what I’m doing wrong?