Calling .NET Function from Javascript File in Blazor Server

Question

I am trying to add dynamically a div element inside my parent div in blazer application. There is a button also in that div which works fine for all those elements which were rendered at the time of page loading. But for Dynamically added Div they are not working. It's because we can't call directly .NET Method from a button using JavaScript. So, I search all over the internet found some solutions but none of them are working. Here is my code for that div to add dynamically.

private async Task AddDivtoTheBoard(VwTicketsAssignList card)
    {
        var TicketName = "";
        if(card.TicketName.Length > 50)
        {
            TicketName = card.TicketName.Substring(0, 50)+"...";
        }
        else
        {
            TicketName = card.TicketName;
        }

        var Description = "";
        if (card.TicketName.Length > 50)
        {
            Description = card.Description.Substring(0, 50) + "...";
        }
        else
        {
            Description = card.Description;
        }
        string htmlContent = @"
        <div class='kanban-item' style='border-top:5px solid '"+card.StatusColor+";' id='Board_" +Convert.ToString(card.TicketId) + @"' draggable='true' ondragstart='drag(event)'>
            <div class='kanban-item-title'>
                <RadzenImage Path='"+card.ProfileImage+@"' class='rounded-circle float-start me-3' Style='width: 40px; height: 40px;' />
                <h6 class='title'> Ticket # "+card.TicketNo+@"</h6>
            </div>
            <div class='kanban-item-title'>
                <h6 class='title'>
                        " + TicketName + @"
                </h6>
            </div>
            <div class='kanban-item-text'>
                <p> 
                        " + Description+ @"

                </p>
                <ul class='kanban-item-tags'>
                    <li><span class='badge "+card.TypeIcon+"' style='color:white;font-family:Calibri;'>"+card.TypeName+@"</span></li>
                </ul>
                <div class='kanban-item-meta'>
                    <ul class='kanban-item-meta-list'>
                        <li class='text-danger'><span>"+card.TimeLine?.ToString("dd-MMM-yyyy")+@"</span></li>
                        <li><em class='icon ni ni-notes'></em><span>"+card.StaffName+@"</span></li>
                    </ul>
                    <ul class='kanban-item-meta-list'>
                        <li><em class='icon ni ni-clip'></em><span></span></li>
                        <li><em class='icon ni ni-comments'></em><span></span></li>
                    </ul>
                </div>
                <div class='btn-group'>
                     <button class='kanban-add-task btn btn-block'  onclick='callShowAssignToComponentByID(" + card.TicketId + @")'>Actions </button>
                </div>
            </div>
        </div>
    ";
        var StageID = "Stage_"+Convert.ToString(GetStageIDForTickets(card));
        var script = $"addDivToTopOfStage('{StageID}', `{htmlContent}`);";
        await _JsRuntime.InvokeVoidAsync("eval", script);

    }

Div got added on the page but button function onclick is not working I tried using JSInvokable attribute but got no luck here is the JSInvokable Method

[JSInvokable("ShowAssignToComponentByID")]
    public  async Task ShowAssignToComponentByID(string _ticketID)
    {
        int ticketID = Convert.ToInt32(_ticketID);
        SelectedTicket =  _VwAssignedTicketsList.Where(ticket => ticket.TicketId != ticketID).FirstOrDefault() ;
        _ShowAssignToComponent = true;
        StateHasChanged();
    }

and here is my Javascript code to call this Method

let JsRuntime; // Global variable to store the IJSRuntime

function setJSRuntime(runtime) {
    JsRuntime = runtime;
}

window.callShowAssignToComponentByID = function (ticketID) {
    JsRuntime.invokeMethodAsync('SagErpBlazor','SagErpBlazor.AdminDashboardNew.ShowAssignToComponentByID', ticketID.toString());
};

Please help me to sort out this issue where I am wrong?