Modal in asp.net view not working properly

Question

In my strongly typed view I am looping over a list of objects coming from a database. Each of these objects is presented in a jumbotron, which has a button "Had role before". On click the modal opens and there I want to input some data in input boxes and save it to my database via an ajax call. One part of data that I want to input is the unique id which each object in the loop has. With the code I have so far I managed on click to get the id of the first object, but when I am clicking the buttons for the rest of the objects nothing happens.

This is the script in my view :

    <script type="text/javascript">
  $(document).ready(function () {

    $(function () {

        var idW;
    $('#mdl').on('click', function () {
       var parent = $(this).closest('.jumbotron');
       var name = parent.find('input[name="mdlname"]').val();
       var id = parent.find('input[name="mdlwrid"]').val(); 
       var idW = id;

       console.log(idW);
       var titleLocation = $('#myModal').find('.modal-title');
       titleLocation.text(name);

       $('#myModal').modal('show');

     });
});

    $('#mdlSave').on('click', function () {
        console.log('x');
        addPastRoleAjax();

    });
    function addPastRoleAjax() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("addPastRole", "WorkRoles")',
            dataType: "json",
            data: {

                wrId: idW,
                dateStart: $("#wrdateStart").val(),
                dateEnd: $("#wrknamedateEnd").val()


            },
            success: successFunc
        });

        function successFunc(data, status) {


            if (data == false) {
                $(".alert").show();
                $('.btn').addClass('disabled');

                //$(".btn").prop('disabled', true);
            }

        }


</script>

the loop :

    @foreach (var item in Model)
{

    <div class="jumbotron">
        <input type="hidden" name="mdlwrid" value="@item.WorkRoleId" />
        <input type="hidden" name="mdlname" value="@item.RoleName" />

        <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
        <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
        <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
        <p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
    </div>

}

The modal :

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <p>Some text in the modal.</p>
            <input id="wrdateStart" class='date-picker' />
            <input id="wrknamedateEnd" class='date-picker' />

        </div>
        <div class="modal-footer">
            <button type="button" id="mdlSave" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
    </div>
</div>

Answer 1

Your problem is in the following piece of code:

   @foreach (var item in Model)
   {
        <div class="jumbotron">
           <input type="hidden" name="mdlwrid" value="@item.WorkRoleId" />
           <input type="hidden" name="mdlname" value="@item.RoleName" />
           <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
           <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
           <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
           <p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
       </div>
  }

You have used a foreach loop and inside it you create button elements with same id .

<button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button>

So, foreach let you to create many buttons with same id . That's wrong and that's why you get that behavior(only first button work). The solution: Use classes instead.