Open Modal to a Specific Record

Hello Experts!

Please, help. I don't know why this code is not opening modal to a specific record. It only opens the first record on the list. The second link shows the first record when clicked. If I refresh the page and click on the second link first, it shows nothing.

I already tested the id for each list, that is fine.

the message.php

<?php while ($message = $result->fetch_object()): 
  $timestamp = $message->msg_date;
  $date = new DateTime($timestamp);
  $date_posted = $date->format('d M Y h:i A');
?>
                                
<div class="content" id="noticeMessage">
  <a class="content-title" href="#"><?= $message->title; ?></a>
  <p class="content-date"><?= $message->category; ?> | <?= $date_posted; ?></p>
  <p class="content-body"><?= $message->description; ?></p>
  <a class="light-green feed-link learnMore" href="#" data-toggle="modal" data-target="#noticeModal" data-id='<?= $message->msg_id; ?>'>Learn more</a>
</div>
<?php endwhile; ?>

Select allOpen in new window

modal dialog:

<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="noticeModalTitle">Message Content</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="getNoticeContentDiv"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Select allOpen in new window

the modal gets data from: notice_modalForm.php:

<?php
require_once '../.../connect.php';

$query = $conn->prepare("SELECT * FROM tbl_message WHERE msg_id = ?");
$query->bind_param("i", $_POST['id']);
$query->execute();
$result = $query->get_result();
$message = $result->fetch_object();

?>

<div class="content">
	<a class="content-title"><?= $message->title; ?></a>
	<p class="content-date"><?= $message->category; ?> | <?= $message->msg_date; ?></p>
	<p class="content-body"><?= $message->description; ?></p>
	<p class="content-body"><?= $message->details; ?></p>
</div>

Select allOpen in new window

using this code:

$('#noticeMessage').on('click', '.learnMore', function(e) {
            e.preventDefault();
            $.ajax({
                url     : 'views/notice_modalForm',
                method  : 'post',
                data    : { id : $(this).data('id') }
                })
                .done(function(data) {
                    $('#getNoticeContentDiv').html(data);
                    $('#noticeModal').modal('show');
                });
            });   
            
        });

Select allOpen in new window

Thank you for your help