Pobieranie danych JavaScript

Witam,
posiadam widok Index.cshtml wywoływany przez kontroler UsersController -> w widoku wywoływana jest lista użytkowników z wykorzystaniem pętli foreach -> dla wyświetlenia szczegółów danego usera używam okienka Bootstrap Modal wywoływanego poprzez skrypt JavaScript. Jednakże za każdym razem dla każdego przycisku ładowany jest tylko pierwszy użytkownik -> podejrzewam że jest to problem z id buttona wywołującego skrypt (jest wywoływany tylko unikalny pierwszy rekord). Proszę o pomoc w jaki sposób to poprawić tak żeby zawsze wyświetlały się dane konkretnego użytkownika a nie tak jak w tej chwili zawsze użytkownika o ID=1.

fragment Index.cshtml

@foreach (var item in Model) {
    <tr>
        <td>
            <span class="glyphicon glyphicon-user"></span>
        </td>
      
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Surname)
        </td>
        
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.Team.Name)
        </td>
        
        <td>
            
            

            <button id="show-btn" data-url='@Url.Action("ViewTester", "Users", new { id = item.UserID })'>Details</button>
            

            

            
    


</td>
</tr>

    }

</table>

<div id='myModal' class='modal fade' role="dialog" >
    <div class='modal-dialog'>
        <div id="container" class="modal-content">
        </div>
    </div>
</div>

Skrypt używany do wywoływania okna Modal

<script type="text/javascript">
    $(document).ready(function() {
        $("[id='show-btn']").click(function() {
            var url = $("[id='show-btn']").data('url');

            $.get(url, function(data) {
                $('#container').html(data);

                $('#myModal').modal('show');
            });
        });
    });
    </script>

fragment UsersController.cs wywołujący metodę przedstawiające szczegóły usera

public ActionResult ViewTester(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }

            User user = db.Users.Find(id);
            if (user == null)
            {
                return HttpNotFound();
            }
            return PartialView("_Test", user);

Po pierwsze ogarnij to

        $("[id='show-btn']").click(function() {
            var url = $("[id='show-btn']").data('url');
 
            $.get(url, function(data) {
                $('#container').html(data);
 
                $('#myModal').modal('show');
            });
        });

do

        $("#show-btn").click(function() {
            var url = $(this).data('url');
 
            $.get(url, function(data) {
                $('#container').html(data);
 
                $('#myModal').modal('show');
            });
        });

Po drugie - i powodujące błąd - zobacz, co za potworka spłodziłeś:
<button id="show-btn" data-url='@Url.Action("ViewTester", "Users", new { id = item.UserID })'>
Wartość id MUSI być UNIKALNA w całym html. Wywal id="show-btn", przycisk zdefiniuj jako <button class='view-details' data-url='@Url.Action("ViewTester", "Users", new { id = item.UserID })'>Details</button>, a potem podepnij się $(".view-details").click(function() { alert($(this).data('url')); });.