How to handle Form in a Table with Child Row

Hello Experts!

I need help on the following.

I have a html Table ( with Child rows that show extra / detailed information ). See attached. There's a form in this Child Row where System Admin can send message to individual user. Because the table is populated via while loop, the Send button only recognizes the first row resulting in server to send back empty input error.

I want the AJAX to recognize the Send button just for the selected user.


As you can see above, though I selected the user 3 (row 3), the onclick event picks inputs from row 1.

The form part of the Table:

<form method="post" id="msgForm" action="">
  <div class="form-group">
    <input type="hidden" name="to_user_id" id="to_user_id" value="<?= $user->UserId; ?>">
    <input type="hidden" name="to_initials" id="to_initials" value="<?= $user->Initials; ?>">
    <input type="hidden" name="from_user_id" id="from_user_id" value="<?= $session_Id; ?>">
    <input type="hidden" name="from_initials" id="from_initials" value="<?= $session_initials; ?>">
    <textarea class="width-100" name="msg_content" id="msg_content" resize="none" placeholder="Type message here…"></textarea>
  </div>

  <div class="hr hr-dotted"></div>

  <div class="clearfix">
    <label class="pull-left">
      <input type="checkbox" class="ace" />
      <span class="lbl"> Send me a copy</span>
    </label>
    <button class="pull-right btn btn-sm btn-primary btn-white btn-round msg_btn" type="button" name="msgBtn" id="msgBtn">
      Send
      <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
    </button>
  </div>
</form>

Select allOpen in new window

And the AJAX:

$('#staffTable').on('click', '.msg_btn', function(e) {
  $.ajax({
    url     : '../../msg_controller',
    method  : 'post',
    data    : $('#msgForm').serialize(),
    dataType : 'json'
  }).done(function(response) {

  var type = response.status ? 'success' : 'danger';
    if (type == 'success') {
      $("#msgForm")[0].reset();
      toastr.success(response.message);
    } else{
      toastr.error(response.message);
    }
  });
});

Select allOpen in new window

If you need more info, please let me know what to send.

Thank you.