Pass data into a Modal using JavaScript

Question

for now I have a pop up modal box with some details from my model. It pops up when a user clicks on a list item. What i did i have added the Modal into a foreach loop which i know is not the best way of doing it. It works but it creates a modal per list item...

Is there a way of having the modal outside the foreach loop and just populating the content on click event?

This is my modal: and foreach loop

@foreach (var item in Model.Where(p => p.CurrentStatus == "Start"   && p.member == "budyn"))
            {
                 <!-- Modal -->
                <div class="modal fade" id="myModal" 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">@item.JobID</h4>
                            </div>
                            <div class="modal-body">
                                <p>@item.JobTitle</p>
                                <!-- etc... -->
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>

                    </div>
                </div>
                <li class="list-group-item"> <a data-toggle="modal" data-target="#myModal">@item.JobID @item.JobTitle </a> </li>

            }

Answer 1

Here you can proceed like.

Your list of rows

@foreach (var list in Model)
{    
     //You can put other rows data like data-id and get them on popup open                
   <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id="@list.PrimaryKey">Click</button>

 }

Your modal outside to the loop

<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">Details</h4>
                        </div>
                        <div class="modal-body">
                           <input id="primaryKeyValue">
                        </div>
                        <div class="modal-footer">
                            <form asp-controller="Billing" asp-action="Delete" method="post" class="form-inline" role="form">
<input type="hidden" id="id">
                                <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div> 

On modal open

    $(document).ready(function () {
            $('#myModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);//Button which is clicked
                var clickedButtonId= button.data('id');

               $("input #primaryKeyValue").val(clickedButtonId);

 // If there are many values you want to show or want to make ajax call, you can do it here, and then setthem inside modal(popup)

        });  

See for more details about bootstrap events https://getbootstrap.com/javascript/#modals-related-target