I've a tchat with websocket and I wan't to delete message by clicking on button.

Each message are displayed with this function :

const displayMessage = (message, author, icon, color, time) => {
            let url = '{!! route('users.profile', ":name") !!}'.replace(':name', author);
            let currentUser = '{!! Auth::user()->username !!}'
            let whoClass = currentUser === author ? "me" : "other"
            return `
                <div class="message ${whoClass}" data-username="${author}">
                    <p>${message}</p>
                    <span class="sub_message">
                        <i class="fad ${icon} text-${color}"></i>
                        <a href="` + url + `">${author}</a>
                            - ${time}
                       ${deleteBtn(author)}
                    </span>
                </div>
                `
        }

But I use a policy with @can to display the button only for admin user and other condition : moderator can't delete message of admin, but this is not the problem.

How can I display this @can directive on JS ? with ${author} variable

const deleteBtn = (author) => {
            @can('deleteTchatMessage', ${author})
                <form class="d-inline" action="{{ route('index') }}" method="POST">
                    @method('DELETE')
                    @csrf
                    <button class="btn" type="submit" onclick="return confirm('Are you sure you want to delete it ?')">
                    <i class="fad fa-trash text-red"></i>
                    </button>
                </form>
            @endcan
        }

At the moment, it doesn't recognize the author variable, so I must be doing it wrong