[SalesForce] How to pass parameter to javascript method from table in LWC

I have table that shows list of record, I want to make call to javascript function with each iterated value as a parameter.
Here is the detail of my js and html file:

OnboardingPage.js


import getBacklog from '@salesforce/apex/OnboardingHandler.getOnboardingBacklog';

export default class OnboardingPage extends LightningElement {
    @wire(getBacklog) onboardingList;

    doSomething(onboardingId) {
        console.log('clicked: ' + onboardingId);
    }
}

OnboardingPage.html

<template>
    <lightning-card title="Onboarding" icon-name="action:new_task">
        <div class="slds-m-around_medium">
            <template if:true={onboardingList.data}>
                <table id="tblOnboardingList">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template for:each={onboardingList.data} for:item="dt" for:index="indexvar">
                            <tr id="datarow">
                                <td>
                                    <!-- need to call js function with the parameter 
                                    <a onClick={doSomething(dt.Id)}>
                                        {!dt.Account.Name}
                                    </a>
                                </td>
                                <td>{!dt.Email}</td>
                                <td>{!dt.Phone}</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </template>
            <template if:true={onboardingList.error}>
                {onboardingList.error}
            </template>
        </div>
    </lightning-card>
</template>

The error i got when I try to call js function with parameter:

Invalid expression {doSomething(dt.Id)} – LWC1060: Template expression doesn't allow CallExpression

Basically I want to call js function with parameter within iterated record. How can I achieve this in LWC?

Best Answer

You can pass data using data attributes of HTML elements. You can set multiple data attributes on each elements. For eg.

HTML

<a onclick={getIdVal} data-id={dt.id}>Test</a> 

JS Controller

getIdVal(event){
    event.preventDefault();
    console.log('id => ' + event.target.dataset.id);
}

Here is the live example