如何显示要编辑的特定行的注释？

Question

这是使用jQuery，Ajax，php，mysql和html的评论系统。当我单击“编辑”按钮时，它将显示MySQL表的第一行的注释，而不是我选择的行。但是，一旦我对其进行编辑，它便会纠正正确的行。我想不出一种方法来显示我要编辑的行的注释。

我可以在文本区域中显示该行的正确comment_id，但是它将在文本区域中显示第一行的注释。

这里是测试用例代码：

MySQL表有两行：comment_id作为主要行，comment则为文本。我将数据库命名为：testcaseedit_db，并将表命名为：tbl_comment。

index.php

<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?>

<div id="display_comment"></div>
<div id="comment_message"></div>

<div id="display_edit"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function() 


let count = 0;

$(document).on('click change', '.edit, .submit', function(e) 

  if ($(this).is('.edit')) 

    var comment_id = $(this).attr("id");
    $('#comment_id').val(comment_id);

    var closestDiv = $('button').closest('div.panel'); 
    $('.div.panel').not(closestDiv.next('.div.panel')).hide();
    closestDiv.next('div.panel').slideToggle(100);

    var commentEdit = $('#display_comment').find('#editable').html(); 

  ++count;

  const htmlString = 
  `<form id="comment_form$count" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">

    <div class="input-group-prepend">
      <textarea name="comment" id="comment$count" class="form-control" rows="30" cols="160"> 
        $commentEdit $comment_id 
      </textarea>
    </div>

    <div class="input-group-prepend">
     <input type="hidden" name="comment_id" id="comment_id" value="$comment_id" />
     <input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form$count" />
    </div>
  </form>`;


  $('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);



     else if ($(this).is('.submit')) 

    $.ajax(
     url:"edit.php",
     method:"POST",
     data: new FormData(this),
     contentType: false,
     processData: false,
     success:function(data)
     
      if(data.error != '') 
       $('#comment_form')[0].reset();
       $('#comment_id').val(comment_id);
       $('#comment').val(comment);
      
     
    );

   location.reload();

      $(this).closest('form').submit();
      e.stopPropagation();
     else 
      return false;
    

);

 // Fetch comment
 function load_comment()
        $.ajax(
         url:"fetch.php",
         method:"POST",
         success:function(data)
          $('#display_comment').html(data);
         
        )
 ;

 load_comment();


// End of (document).ready(function)
); 
</script>


 </body>
</html>

fetch.php

<?php

$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');

$query = "
SELECT * FROM tbl_comment WHERE comment_id = comment_id
";

$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';

foreach($result as $row) 
 $output .= '
 <div class="panel panel-default">
  <div class="panel-heading"> <b> comment_id: </b> '.$row["comment_id"].' </div>
  <div class="panel-body"><b> Comment: </b> <br> <span id="editable">  '.$row["comment"].'  </span> </div>
  <div class="panel-footer" align="right">

  <button type="button" class="btn btn-default edit" id="'.$row["comment_id"].'">Edit</button>

  </div>
 </div>
 ';



echo $output;

?>

edit.php

<?php

$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');

$comment_id = $_POST["comment_id"];
$comment = $_POST["comment"];

if ( $error == '' && !empty($_POST["comment"]) ) 


 $query = "UPDATE tbl_comment SET comment = :comment WHERE comment_id = :comment_id ";

 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':comment_id' => $comment_id,
   ':comment'    => $comment
  )
 );

  header("Location: index.php");

 

$data = array(
 'error'  => $error
);

echo $error;

?>