Develop Reference

There are three modals on a page. Each respective modal opens correctly, but with wrong modal body content

Each button opens a different modal
I have a peculiar issue with Bootstrap 5 modal. I have a webpage that lists database records (please see screenshot). Each record has three buttons to open their respective modal (view, edit, other).
Once the page loads, if I click the 'view' button to open its respective modal, the content of the modal body appears correctly. If I close this modal and then click either my 'edit' or 'other' buttons to open their respective modal, the content of the modal body is that of my 'view' modal - even though the modal header displays the correct title for my 'edit' and 'other' modals (suggesting to me that the correct block of 'modal code' is in play).
Now, if I refresh the webpage, and then click either my 'edit' or 'other' buttons (not clicking the 'view' button just yet), the respective modal opens with the correct content in the modal body as expected. But, once I click my 'view' button and open its respective modal, all subsequent attempts to open my 'view' and 'other' modals keep displaying the modal body content of my 'view' modal - despite what the modal header title shows.
My code is listed below. Since I an not experienced in Javascript, I suspect the case of this issue lies there. Any feedback is appreciated.
HTML Table Code:
<table >
<thead>
<tr>
<th>ID</th>
<th>Name (Last, First)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1046</td>
<td>ABBE, BILLY</td>
<td>
<button id="1046" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
</td>
</tr>
<tr>
<td>506</td>
<td>ABBEY, TEST</td>
<td>
<button id="506" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
</td>
</tr>
</tbody>
</table>
Modal HTML:
<div class="modal fade" id="MyEditModal" tabindex="-1" role="dialog" aria-labelledby="MyEditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MyEditModalLabel">Edit Modal</h5>
</div>
<form action="xxxx.php" method="post" name="EditForm" id="EditForm">
<div class="modal-body">
<h6 class="mt-2">Test edit modal</h6>
<div class="form-floating">
<input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Name" id="Edit_Name" >
<label for="Edit_Name" class="form-label">Name:</label>
</div>
<div class="form-floating">
<input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Email" id="Edit_Email" >
<label for="Edit_Email" class="form-label">Email:</label>
</div>
<input type="text" name="Edit_ID" id="Edit_ID">
<input type="hidden" name="Modal_Type" value="Edit" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" name="editdata" class="btn btn-warning">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="MyOtherModal" tabindex="-1" role="dialog" aria-labelledby="MyOtherModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MyOtherModalLabel">Other Modal</h5>
</div>
<form action="xxxx.php" method="post" name="OtherForm" id="OtherForm">
<div class="modal-body">
<h6 class="mt-2">Test other modal</h6>
<div class="form-floating">
<input class="form-control" type="text" name="Other_Name" id="Other_Name" >
<label for="Other_Name" class="form-label">Name:</label>
</div>
<div class="form-floating">
<input class="form-control" type="text" name="Other_Email" id="Other_Email" >
<label for="Other_Email" class="form-label">Email:</label>
</div>
<input type="text" name="Other_ID" id="Other_ID">
<input type="hidden" name="Modal_Type" value="Other" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" name="adddata" class="btn btn-warning">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="ShowRecordModal" role="dialog" aria-labelledby="MyViewModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="ShowRecordModal">
<h5 class="modal-title">Customer Details</h5>
<button type="button" class="btn-close no-print" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Supporting Javascript:
<script>
$(document).ready(function() {
$('table tbody').on('click', 'button', function() {
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
cust_id = data[0];
$.ajax({url: "readtest.php",
method: 'post',
data: {CID:cust_id},
success: function(result) {
$(".modal-body").html(result);
}
});
$('#ShowRecordModal').modal('show');
})
})
</script>
<script>
$(document).ready(function () {
$('.MyEditBtn').on('click', function () {
$('#MyEditModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
$('#Edit_ID').val(data[0]);
$('#Edit_Email').val(data[1]);
$('#Edit_Name').val(data[2]);
});
});
</script>
<script>
$(document).ready(function () {
$('.MyOtherBtn').on('click', function () {
$('#MyOtherModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
$('#Other_ID').val(data[0]);
$('#Other_Email').val(data[1]);
$('#Other_Name').val(data[2]);
});
});
</script>
I've removed extraneous codes such as the DataTables plug-in leaving only the minimum code to eliminate possible third-party components involvement in the issue.

The reason why all your modals get the same content in the modal body after clicking on the "view" button is because you're targeting the .modal-body of every modal on your page in your jQuery $.ajax() function: $(".modal-body").html(result);.
You need to target the modal ID first in the jQuery selector $():
$("#ShowRecordModal .modal-body").html(result);

How can I add a identification value to a modal box to identify which particular div the modal is being opened from

I have three divs each looking like this
<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
<div class="card">
<div class="card-body b-primary">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-12">
<img src="assets/images/gateway/61eedfd72289f1643044823.jpg" class="card-img-top w-100"
alt="Stripe">
</div>
<div class="col-md-7 col-sm-12">
<ul class="list-group text-center">
<li class="list-group-item">Stripe</li>
<li class="list-group-item">Limit : 50- 50000 USD</li>
<li class="list-group-item"> Charge - 0 USD+ 0% </li>
<li class="list-group-item">
<button type="button" data-id="str"
data-base_symbol="" class=" btn deposit cmn-btn w-100" data-toggle="modal"
data-target="#exampleModal">
Deposit</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
i have identified and differentiated each of the 3 divs using data-id now when the deposit button is clicked it opens up this modal below,
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-bg">
<div class="modal-header">
<strong class="modal-title method-name text-white" id="exampleModalLabel">Input Deposit Amount</strong>
<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
<form action=" {{ route('deposit_request') }}" method="post" class="register">
#csrf
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="method_code" class="edit-method-code" value="">
<x-jet-validation-errors class="mb-4" />
#include('flash-message')
</div>
<div class="form-group">
<label>Enter Amount:</label>
<div class="input-group">
<input id="amount" type="text" class="form-control form-control-lg" name="usdamt"
placeholder="0.00" required="" autocomplete="off">
<div class="input-group-prepend">
<span class="input-group-text currency-addon addon-bg">USD</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-md btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn-md cmn-btn">Next</button>
</div>
</form>
</div>
</div>
</div>
now my question is how do I get the data-id variable to the hidden input in the modal to be able to identify which particular payment method was/is been used to open the modal, I suppose it can be done with Ajax or JavaScript, but not being so diverse in this areas I can seem to get it sorted out and is there a better way to differentiate the divs without using data-id

Bootstrap provides events of their modals.
The event I used here is show.bs.modal. The event details has a property called relatedTarget which tells you what prompted the modal event.
From that element you can extract the data-id attribute.
$('#exampleModal').on('show.bs.modal', function (e) {
var data_id = $(e.relatedTarget).data('id');
console.log(data_id);
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-id="MAGIC" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

There could be multiple solutions, but you could implement event delegation here.
Move the click event handler up to the parent div element containing all these buttons.
In your event listener, you could do something like this:
let selectedPaymentMethod = "";
const paymentClickHandler = (event) => {
// get the element
const buttonClicked = event.target;
// there are several to check if it's button, i'm using classList
if (buttonClicked && buttonClicked.classList.contains("btn")) {
// there are multiple ways to handle this
// if (buttonClicked.classList.contains('stripe')) payingUsingStripe();
// if (buttonClicked.dataset.paymentmethod === 'stripe') payingUsingStripe();
// I would do something like below
setPaymentMethod(buttonClicked.dataset.paymentmethod);
displayModal();
}
};
function setPaymentMethod(paymentMethod) {
// do some checks to ensure valid value and then
selectedPaymentMethod = paymentMethod;
}
CodeSandbox to demonstrate above.
Hope it helps.

Reset button label when the dialog is closed

I'm using this code to implement copy into clipboard functionality:
function copyToClipboard(e, btn) {
e.preventDefault(); // prevent submit
var str = document.getElementById("forms-subscribe-email");
str.select();
document.execCommand('copy');
btn.innerHTML = "Copied!";
return false; // prevent submit
}
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
</div>
<div class="input-group-btn">
<button class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
This code works fine but when I open the dialog second time I see the text button Copied. How I can reset the label of the button each time when I open the dialog?

Add this Code On model Show, Need to Reset Text to Orignal
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
</div>
<div class="input-group-btn">
<button id="copyBtn" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Reset Before Open
document.getElementById("copyBtn").innerHTML = "Copy!";
Reset Before Hiding
$("#bitcoinModal").on("hidden.bs.modal", function (e) {
document.getElementById("copyBtn").innerHTML = "Copy!";
})
Hope it Helps for Your need.

You could attach the "reseting" of the text to the closing or hidding event on the modal.
First, modify your button with an id:
<button id="btnCopyToClip" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
Then, in your JS, add the event listener for hidden.bs.modal on the modal:
$("#bitcoinModal").on("hidden.bs.modal", function (e) {
let btnCopyToClip = document.getElementById("btnCopyToClip");
btnCopyToClip.innerText = "Copy";
});

Here is code :
https://jsfiddle.net/aviboy2006/3k7z2c64/1/
Add code in js :
function openModal(){
$("#bitcoinModal").modal();
$('.btn-width-165').html("Copy");
}
Add your open modal code :
<button type="button" class="btn btn-info btn-lg" onClick="openModal()">Open Modal</button>

ng-repeat not working inside of modal

I've got a shop page that is meant to pop up a modal when clicking on a "More Details" button that offers the "name" and "description" from a JSON file. So far, I've only been able to get the name and description for the first item of the JSON array, regardless of which button I click. HTML looks like so:
<div ng-controller="myController" class="container-fluid">
<div class="row clear-fix">
<div ng-repeat="product in shop" class="col-md-4">
<div class="panel-heading">
<h1>{{product.name}}</h1>
</div>
<div class="panel-body">
<div>
<img ng-repeat="image in product.images" ng-src='{{image.full}}' />
</div>
<h2>{{product.price | currency}}</h2>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">More Details</button>
<div class="modal fade" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{product.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{product.description}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Purchase</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

BootStrap modal doesn't want to be closed

I’m using BootStrap
I open a modal(the modal is inside a file).
<div id="buy-function" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Achat </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form class="operation" role="form" method="post" >
<div class="form-group">
<label for="quantite" class="col-sm-3 control-label">Quantitée : </label>
<div class="col-sm-9">
<input type="number" class="form-control" id="buy_live_quantite" name="quantite" value="10" >
</div>
</div>
<div class="form-group">
<label for="justif" class="col-sm-3 control-label">Justification : </label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="justif" name="justif"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<!--<div class="modal-footer"></div>
<div id="live_invoice"></div>-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" id="new_operation" class="btn btn-info">Acheter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I open a modal with a button.
<div class="box-body">
<button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#buy-function">Acheter</button>
<button type="button" class="btn btn-block btn-warning btn-lg" data-toggle="modal" data-target="#sell-function">Vendre</button>
</div>
However, when I want to close this modal
(I use
$('#buy-function').modal('hide'); ),
my script :
<script>
$(document).ready(function () {
$("button#new_operation").click(function(){
$.ajax({
type: "POST",
url: "/views/composants/new_operation.php", //process
data: $('form.operation').serialize(),
success: function(msg){
//alert(msg);
$('#buy-function').modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
it doesn’t work. Any idea ?

Check that you are not including jQuery more than once. Bootstrap will apply it to the first instance only and when jQuery gets initiated again then it will be lost.