How to pass id from button to modal

Answer 1

Will suggest more easy and less complicated approach and bootstrap framework will handle the rest.

replace following

<td class="action">
    <input type="submit" value="&#xf112;&nbsp;&nbsp;&nbsp;Reply" href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" style="background-color: #313437;border:1px solid #313437" class="btn btn-primary btn-single btn-sm fa-input">
    <input type="text" hidden="" value="<?php echo $i;?>" name="id"></input>
</td>

With

<td class="action">
    <button type="button" data-toggle="modal" data-target="#modal-6" data-id="This Is Id" class="btn btn-primary btn-single btn-sm fa-input">Reply</button>
</td>

Use data-toggle and data-target attributes to open the modal and with additional data-id attribute and show.bs.modal or shown.bs.modal modal events, can pass the value to modal

$(document).ready(function() {
  $('#modal-6').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget).data('id');
    alert(id);
  });
});

To keep the backdrop: 'static' add it in Modal HTML Markup

<div class="modal fade validate" id="modal-6" data-backdrop="static" data-keyboard="false">
   <!--- Rest of the modal code ---->
</div>

Answer 2

I have been inspirited by @Shehary but had to use it with little different syntax.

$(document).ready(function() {
  $('#modal-6').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget.id).selector;
    alert(id);
  });
});