Javascript 如何从我的数据库中打开具有唯一消息id的弹出窗口

我正在尝试在我的网站中创建一个弹出消息对话框。当用户单击回复图标时，会出现一条弹出消息，他会有一个文本区域来回答他被问到的问题

现在，当用户单击“我的标签”时，无论他在邮件收件箱中按了哪条邮件，都会打开对话框

我需要一种方式，我只能使对话框打开的唯一id的消息

现在，每当用户单击任何要回复的消息时，除非它们是第一条，否则它总是从上到下开始回复。我想让它回答他点击的特定信息

这是我的弹出窗口：

<div class="sitemodal fade" id="reply-popup">
    <div class="sitemodal-dialog" >

      <!-- siteModal content-->
      <div class="sitemodal-content">
        <div class="sitemodal-header">
          <button type="button" class="close-popup">&times;</button>
          <p id="showMesgID" style="display:none;"></p>
          <h4 class="sitemodal-title" style="font-size: 20px;">Reply</h4>
        </div>
        <hr style="margin-top: 8px;margin-bottom:2px;">
        <div class="sitemodal-body" style="padding: 0px 0;">
          <form enctype="multipart/form-data" method="Post" action="" name="msgform" onsubmit="">
        <textarea placeholder="Reply to the eitiraaf" name="textarea1"  onkeyup="countChars(this);" id="textarea1" maxlength="250" rows="3" cols="2"
            style=" text-align: left; resize:none; margin-top:4px; 
                width:90%;min-width:200px; height:100px; background: #fff; border-radius: 6px;
                border: 0.8px solid #ac68cc;
                 max-width:500px;
                 padding:6px;"></textarea>

      
        </div>
        <hr style="margin-top: 16px;margin-bottom:2px;">
        <div class="sitemodal-footer" style="display: flex;margin-bottom:8px;">
            <input style="padding: 8px;margin-top:16px; position:inherit;  width:25%; background: #ac68cce3; border-radius: 6px; border: 0.6px solid #ac68cce3; color: #fff; max-width:330px;"
        class='main-div' type="submit" value="Reply" name="sendmsg">
         
    
        </div>
      </div>
          </form>
    </div>
</div>

我尝试了很多方法让这个弹出窗口工作。ajax、javascript函数和许多不同的方法来放置和显示我的弹出窗口。但什么都没用。如果有人有任何建议，我将不胜感激

---

我的主要问题是：用户如何回答他按下图标的特定问题？

正如您在评论中所说，您正在使用引导模式打开弹出窗口，因此在打开弹出窗口时需要更改表单中的消息id

按钮回复：

<a class="btn btn-primary reply" data-id="544" data-toggle="modal" data-target="#reply-popup"> Reply</a>

---

JSFIDLE中的示例：

让我们从这个尝试开始，源代码上打印了多少个弹出窗口？如果每条消息都有自己的弹出窗口，那么问题在于id=reply popup将其重命名为reply popup-{$id}是的，我尝试将弹出窗口放在while循环中，循环用户收到的每条消息，但这会导致问题，因为它会回答它找到的消息id的第一个实例。现在我有了循环外的弹出窗口，但仍然有相同的问题。您能否显示触发弹出窗口的javascript代码以打开它，以及触发弹出窗口的CSS//这是用户按下以打开弹出窗口的图标。在这里，我希望每个消息的内容都是唯一的。必须有一个javascript代码来显示/隐藏模式/弹出窗口。您使用引导还是其他方法？

if (isset($sendmsg)){

            $msg_id=$row['msgid'];
    
        
        
            $txt = $_POST['textarea1'];
        
    
                date_default_timezone_set("Asia/Bahrain");
                $d = date('Y-m-d H:i:s');
                $from = $_SESSION['active_user_id'];
                $user_name = $_SESSION['active_user'];
                $query = "INSERT INTO messages_reply (from_id, question, answer, message_id ,date,to_id) VALUES
                (?,?,?,?,?,?)";
                $result = $db->prepare($query);
                $result->bindParam(1, $from);
                $result->bindParam(2, $question);
                $result->bindParam(3, $txt);
                $result->bindParam(4, $msg_id); 
                $result->bindParam(5, $d);  
                $result->bindParam(6, $to_id);                  
                $result->execute();
                if ($result)
                {
                    $deleteMessage = $db->prepare("DELETE FROM messages WHERE msgid=?");
                    $deleteMessage->bindValue(1,$msg_id);
                    $deleteMessage->execute();
                    
            
                    
                    header( "location:profile" );
                    
                    $success = true;
                }
                
                
                
                $db=NULL;
            
            
        
        }

<a class="btn btn-primary reply" data-id="544" data-toggle="modal" data-target="#reply-popup"> Reply</a>

<div class="fade modal" id="reply-popup">
    <form action="post">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
            <input type="hidden" name="msgid" value="">
            <textarea class="form-control" name="message"></textarea>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Send</button>
        </div>
      </div>
    </div>
  </form>
</div>

jQuery(document).ready(function(e) {
    $(document).on('shown.bs.modal','#reply-popup', function (e) {
        var messageId = $('.reply').data('id');
      $('#reply-popup input[name="msgid"]').val(messageId);
    });
});