Using Bootstrap modal with HTML clickable-row in table which is populated by foreach to return clicked row content

Question

I have an HTML table that is populated by means of an array using foreach from an MVC MySql query. I am using class="clickable-row" in the table row to open a modal with the intention of updating any cells in that table row with new information that will then update the MySql database through a form. My problem is that, because the table is populated by foreach, when I click on a row, the modal is populated with the last row in the table's content. How do I get it to return the clicked rows content? HTML -->

            <th>Update</th>
            <th class="numeric-sort">Waybill</th>
            <th>Date</th>
            <th>Client</th>
            <th>From</th>
            <th>To</th>
            <th>Supplier</th>
            <th>Supplier Wb</th>
            <th class="numeric-sort">Billable wght</th>
            <th class="numeric-sort">Service</th>
            <th>Pmnt method</th>
            <th>Insurance</th>
            <th class="numeric-sort">Desc</th>
            <th>Cost net</th>
            <th>Cost VAT</th>
            <th>Cost Total</th>
            <th>Sale</th>
            <th>GP</th>
            <th>Supplier Inv</th>
            <th>Inv No.</th>
            <th>POD.</th>
            <th>Comp.</th>
            
        </tr>
        </thead>
<?php 
    foreach ($orderbook_infos as $orderbook_info) { ?>
        <tr class='clickable-row' data-toggle="modal" data-target="#editModal" style="cursor:pointer">
                <td><button class="btn btn-primary btn-sm">Update</button></td>
                <td><?php echo $orderbook_info['order_id']; ?></td>
                <td><?php echo mb_strimwidth($orderbook_info['date_added'], 0, 10); ?></td>
                <td><?php echo $orderbook_info['payment_company']; ?></td>
                <td><?php echo mb_strimwidth($orderbook_info['collection_city'], 0, 12); ?></td>
                <td><?php echo mb_strimwidth($orderbook_info['delivery_city'], 0, 12); ?></td>
                <td><?php echo "Seabourne"; ?></td>
                <td><?php echo "400156784"; ?></td>
                <td contenteditable><?php echo $orderbook_info['billable_weight']; ?></td>
                <td><?php echo $orderbook_info['service_selected']; ?></td>
                <td><?php echo $orderbook_info['payment_method']; ?></td>
                <td><?php echo $orderbook_info['insured_value']; ?></td>
                <td><?php echo $orderbook_info['package']; ?></td>
                <td><?php echo "92.00"; ?></td>
                <td><?php echo "123.00"; ?></td>
                <td><?php echo "495.99"; ?></td>
                <td><?php echo $orderbook_info['total']; ?></td>
                <td><?php echo $orderbook_info['total'] - 92; ?></td>
                <td><?php echo "SB123456"; ?></td>
                <td><?php echo "425716"; ?></td>
                <td><input type="checkbox" name="pod" />&nbsp;</td>
                <td><input type="checkbox" name="comp" />&nbsp;</td>
                
                
          </tr>
      <?php } ?>
  </table>

MODAL

<!-- Edit  Job modal -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small>
            </a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Update entry</b></font></span> </div>
        <div class="modal-body">
            <form class="form-horizontal" method="post" action="InsertPassportReminderSrvlt?idEmployee=1">
                <fieldset id="modal_form">

                    <!-- Text input-->
                    <div class="form-group">
                        <!--<label class="col-md-4 control-label" for="textinput">Date Renewal Due</label>-->
                        <label class="col-md-4 control-label" for="textinput">Enter new number</label>
                        <div class="col-md-6">
                            <input name="dateRenewalDue" type="text" class="form-control input-md" value = "<?php echo $orderbook_info['order_id']; ?>">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </fieldset>
            </form>

        </div>
    </div>
</div>

Answer 1

You need create a jQuery code like this:

<script>
    // When the modal is show
    $('#editModal').on('show.bs.modal', function (event) {
        var target = $(event.relatedTarget);

        // Get the order_id from the attribute
        var order_id = target.data('order-id');

        var modal = $(this);

        // Find the input from modal and put a value in it
        modal.find('input[name=dateRenewalDue]').val(order_id);
    })
</script>

In order to get order_id from our jQuery code. We need to add a data attribute on our tr tag

<tr class='clickable-row' data-toggle="modal" data-target="#editModal" data-order-id ="<?php echo $orderbook_info['order_id']; ?>" style="cursor:pointer">

Since we already add data-order-id into our tr tag. From jQuery we are able to get order id upon the modal is trigger

Bootstrap modal docs