[SalesForce] In the LWC datatab, how to dynamically create click events

When "button1" receives 2 pieces of data returned by "APEX", "table" will have 2 lines and contain 2 'sync' buttons.
Question: How do I add click events to these 2 rows of data?
In JS, I can use [i] or [this], but I am not quite sure about it in LWC.

HTML

<template>
    <button class="slds-button slds-button_neutral slds-size_1-of-4 slds-text-heading_small" onclick={button1}>Display Data</button>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="" scope="col">
                    <div class="slds-truncate" title="头像">头像</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="账号名称">账号名称</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="账户会员数">账户会员数</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="数据库内会员数">数据库内会员数</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="手动同步">手动同步</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="同步进度">备注</div>
                </th>
            </tr>
        </thead>
        <tbody for:each={datatableList} for:item="dtl" key={dtl.id}>
            <tr class="slds-hint-parent">
                <th scope="row">
                    <lightning-avatar variant="circle" src={dtl.qrcodeurl} initials="WeChat" fallback-icon-name="standard:person_account" alternative-text="WeChat" class="slds-m-right_small"></lightning-avatar>
                </th>
                <td >
                    <div class="slds-truncate" >{dtl.name}</div>
                </td>
                <td >
                    <div class="slds-truncate" >{dtl.total}</div>
                </td>
                <td >
                    <div class="slds-truncate" >{dtl.localTotal}</div>
                </td>
                <td>
                    <button class="slds-button" onclick={syncBtn} if:false={showload}> 同 步 </button>
                    <lightning-avatar variant="circle" src="https://www.opet.com.tr/assets/images/loading_3.gif" initials="loading" fallback-icon-name="standard:person_account" alternative-text="loading" class="slds-m-right_small" if:true={showload}></lightning-avatar>
                </td>
                <td >
                    <div class="slds-truncate" >本次同步时间,大约耗时:<strong>{dtl.time}</strong></div>
                </td>
            </tr>
        </tbody>
    </table>
</template>

JS

import { LightningElement, track} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import getWeChatList from '@salesforce/apex/cpcs_getWeChatFansServers.getWeChatList';

export default class SystemSetup extends LightningElement {

    @track datatableList = [];
    @track showload = false;

    //get apex return value
    button1() {    

        getWeChatList()
            .then(result => {

                var responseCode = JSON.parse(result).code;
                var responseMsg = JSON.parse(result).msg;
                var responseData = JSON.parse(result).data;

                if(responseCode === 0){
                    this.datatableList = JSON.parse(result).data;
                }else{
                    const event = new ShowToastEvent({
                        title: '获取公众号列表失败',
                        message: '获取公众号列表失败,请联系管理员,失败原因:' + responseMsg,
                        variant: 'error',
                        mode: 'dismissible'
                    });
                    this.dispatchEvent(event);
                }
            })
            .catch(error => {
                this.error = error;
            });

    }

    syncBtn() {
        console.log();
        this.showload = true;
        syncWeChatFans()
            .then(result => {

                var responseCode = JSON.parse(result).code;
                var responseMsg = JSON.parse(result).msg;

                if(responseCode === '0'){
                    const event1 = new ShowToastEvent({
                        title: '同步理成功',
                        message: '同步粉丝数据处理已完成',
                        variant: 'success',
                        mode: 'dismissible'
                    });
                    this.dispatchEvent(event1);
                    this.showload = false;
                }else{
                    const event1 = new ShowToastEvent({
                        title: '同步失败',
                        message: '同步粉丝接口失败,失败原因:' + responseMsg,
                        variant: 'error',
                        mode: 'dismissible'
                    });
                    this.dispatchEvent(event1);
                    this.showload = false;
                }
            })
            .catch(error => {
                this.error = error;
            });
    }
}

Best Answer

Provide a dataset attribute to your sync button like

<button class="slds-button" onclick={syncBtn} if:false={showload} data-whichrow={dtl.id} >

then in your js syncBtn method access which whichrow and see which row was clicked.

syncBtn(event){
        console.log('Sync callled for element : '+ event.currentTarget.dataset.whichrow);
    }

Playground-link : https://developer.salesforce.com/docs/component-library/tools/playground/soo_ZHji3/1/edit