modal iteration in foreach loop using ajax

Question

I got a problem with foreach loop. What am i trying to do is get data (JsonResult) from action in controller. Get get songs for each album.

 public JsonResult SongListByAlbum(int albumID)
        {
            var songs = (from song in Song.GetSongList()
                         join album in Album.GetAlbumList()
                         on song.AlbumID equals album.AlbumID
                         where (albumID == album.AlbumID)
                         select song).ToList();

            return Json(songs,JsonRequestBehavior.AllowGet);
        }

Then put them into view, for album get list of songs and show them as modals There is my view:

@foreach (var item in Model.Albums){

                <button id="@item.AlbumID" type="button" class="btn btn-primary myModals" data-toggle="modal" data-target="#exampleModal-@item.AlbumID">
                    Show
                </button>
                <!-- Modal -->
                <div class="modal fade" id="exampleModal-@item.AlbumID" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-@item.AlbumID" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel-@item.AlbumID">@item.AlbumName @item.Year, @item.BandName</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>                           
                            <div id="parent" class="modal-body">

                            </div>
                            <div class="modal-footer">
                                <button id="closeModal"type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
}

And there is a script, where I get songs for each album.

   <script>

        $(".myModals").on("click", function () {
            var Id = $(this).attr('id');
            alert(Id);
            $.ajax({
                type: "GET",
                url: '@Url.RouteUrl(new{ action= "SongListByAlbum", controller="Default"})',
                data: {albumID:Id},
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {

                    for (var i in result) {         

                        $('#parent').append('<p class="toRemove">' + result[i].SongName + '</p>');                        
                    }                 
                },
                error: function (response) {
                    alert('error');
                }
            });          
        });

    </script>

The problem is: when i click on the first modal button everything is fine, i get what i want to. But when i click on the second one i got empty modal. Then when i click again on the first one i got data from previous click and penultimate. Image: enter image description here

Answer 1

To avoid multiple <div id="parent"> elements, you should probably assign the Id the same way you do for the buttons. Like <div id="parent-@item.AlbumID"> . Then in your ajax call reference the correct div. $('#parent-' + Id) .

Not sure if that is your only probably, but might get you closer.