To show dynamic content in bootstrap modal form in PHP - php

Question

I have included a button to open bootstrap modal form with dynamic heading. If i click the button from any of the item it always showing the first data title.
Ex MySQL table Name - item
Id title amount
1. abc 1245
2. xyz 3344
3. xxx 4455
4. zzz 5566
In the page i am displaying all the rows from the above table, its working as expected.
Now i need a button to open a bootstrap modal form with dynamic heading for each item, but its always showing the first row heading in the modal form.
Expected result
If i click a button for 'xyz' row, currently its showing the heading as 'abc' instead of 'xyz'
HTML/PHP code
<div class="detail">
<h1 class="project-title">
<?php echo $row['title]; ?>
</h1>
<button class="btn btn-success btn-xs small text-white mb-2 desktop-img"><i class="fa fa-envelope pr-2" aria-hidden="true"></i>Email</button>
</div>
Modal form code
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h6 class="modal-title w-100 font-weight-bold">Enquiry Form</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<h1 class="project-title"><?php echo $row['title']; ?></h1>
<div class="md-form mb-1">
<i class="mt-2 fa fa-user prefix grey-text"></i>
<input type="text" id="form34" class="ml-2 form-control validate" placeholder="Your Name">
<!-- <label data-error="wrong" data-success="right" for="form34">Your name</label> -->
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-info">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>

Answer 1

All your modals have the same id attribute. You'll need unique IDs for each modal and then specify this ID in the button as well.
HTML/PHP Code
<i class="fa fa-envelope pr-2" aria-hidden="true"></i>Email
Modal Form Code
<div class="modal fade" id="modalContactForm<?= $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<!--Rest of your modal code -->
</div>
This solution assumes that you have an id field on the rows. If you do not, replace that with whatever unique identifier you have for each row.