Javascript for each record in my view

Question

I have a VIEW where I display a table with 15 records (15 rows) and 5 columns, but what really matters is a column, "Actions". In it I have 1 button, "Visualize", that when clicking, I want to open a window with a message, for testing.

However, only the first record, when clicking the "View" button, displays the window with the message, the other 14 records do not.

How do I have all records/lines display the message?

Follows below code:

VIEW CSHTML

<table class="table table-bordered table-hover tablesorter">
    <thead>
        <tr>
            <th class="header text-center" style="width: 100px;"> Ações </th>
        </tr>
    </thead>
    <tbody id="tabela">     
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @this.Hidden("IdClient").Value(item.Id)
                    <a id="visualizarCliente" class="btn btn-primary btn-xs btn-visualizar" data-toggle="tooltip" title="Visualizar" target="_blank" 
                      href="@Url.Action(MVC.Painel.Clientes.Visualizar(item.Id))">
                        <i class="fa fa-eye"></i>
                    </a>
                </td>
            </tr>
        }
    </tbody>
</table>

Javascript

<script type="text/javascript">
    $(function () {
        $("#visualizarCliente").click(function () {
            var idCliente = $("#IdClient").val();
            window.alert("Teste");
        })
    });
</script>

Answer 1

The problem is that you are using the selector id and it cannot repeat itself. Switch to any other selector, such as data-toggle="tooltip" for example.

<script type="text/javascript">
    $(function () {
        $("a[data-toggle='tooltip']").click(function () {
            window.alert("Teste");
        })
    });
</script>

Answer 2

The ideal in this case would be to use a modal. and pass the value of each id to the modal would be well but practical. he would find the id and show certain functions of each id.