Why is Razor Pages Popup from table not showing the row data?

Question

I have a table with action button to show a value from the table. The model already contains the value to be shown in the popup modal. So no need for postback, but it show the first record for every row. What am I missing? Here is the razor page section:

@foreach (var result in Model.SubmissionDetails.SubmissionEvents)
                        {
                            <tr>
                                <td>@result.SubEventId</td>
                                <td>@result.ReceiverReference</td>
                                <td>@result.Date</td>
                                <td>@result.Mapping</td>
                                <td>@result.Error</td>
                                <td>
                                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#xmlModal" data-bs-whatever="xml">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                                        </svg>
                                    </button>
                                    <div class="modal fade" id="xmlModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5" id="exampleModalLabel">XML</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <form>
                                                        <div id="modelmessage" class="alert alert-success" role="alert" style="display:none">
                                                            <a style="color:darkgreen">XML copied.</a>
                                                        </div>
                                                        <div class="mb-3">
                                                            <span id="xmlText">@Html.TextArea("Info", System.Xml.Linq.XDocument.Parse(@result.XMLValue).ToString(), new {cols="101", rows="30", @readonly="readonly", @disabled="disabled" })</span>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                    <button type="button" class="btn btn-primary" onclick="copyToClipboard()">Copy to Clipboard</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </td>
                            </tr>
                        }

Model is as follows:

public class SubmissionEvent
    {
        public int SubEventId { get; set; }
        public string ReceiverReference { get; set; }
        public DateTime Date { get; set; }
        public string Mapping { get; set; }
        public string Error { get; set; }
        public string XMLValue { get; set; }
        public SubmissionEvent()
        {
            SubEventId = 0;
            ReceiverReference = string.Empty;
            Date = DateTime.MinValue;
            Mapping = string.Empty;
            Error = string.Empty;
            XMLValue = string.Empty;
        }
    }

Here is an image of the page: Submission Events

Answer 1

So the first row is correct, but second and so on show the xml of row one for each row from the second row onwards

The modal id wasn't dynamically changing with the foreach, then the same modal was called each time, so one for each row from the second row onwards .

Try to dynamically change the modal id (into: id="xmlModal-@result.SubEventId", data-bs-target="#xmlModal-@result.SubEventId") like:

<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#xmlModal-@result.SubEventId" data-bs-whatever="xml">
<div class="modal fade" id="xmlModal-@result.SubEventId" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">