PHPとAJAXの削除は最初の行でのみ動作します

Question

シンプルなPHPブログシステムを作成しました。 [投稿の追加]ページの下に、ユーザーはタイトルと本文を入力できます。投稿は投稿ページにあり、ユーザーは投稿を削除できます。

私の問題は次のとおりです。最初の投稿のみを削除できます。他にはない。

はここにショーのために私のコードの記事です：

<?php 
$database->query('SELECT * FROM posts'); 
$rows = $database->resultSet(); 
?> 

<div class="container"> 
<?php foreach ($rows as $row) : ?> 
<h2><?php echo $row['title']; ?></h2> 
<p><?php echo $row['body']; ?></p> 
<small><?php echo $row['create_date'] ?></small> 
<form method="post"> 
    <input id="deleteid" type="hidden" name="delete_id" value="<?php echo 
    $row['id'] ?>"> 
    <input id="delete_button" class="btn btn-primary" type="submit" 
    name="delete" value="Delete"> 
</form> 
<?php endforeach; ?> 
<br><br> 
</div> 

そして、これは私のAJAXコードです：

$("#delete_button").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "?action=delete", 
     data: "delete_id=" + $("#deleteid").val(), 
     success: function (result) { 
     if (result == 1) { 
      //window.location.assign("views/posts.php"); 
     } else { 
      alert("Error"); 
     } 
     } 
    }); 
    }); 

Answer 1

あなたは複数の入力/ DIVまたはその他のHTMLタグに同じIDを使用することはできません。 id = "deleteid"をclass = "deleteid"に変更して、クリックイベントを変更してください。だからあなたのこの行は、に変更されます -

<input class="deleteid" type="hidden" data-deleteid="<?php echo 
    $row['id'] ?>" name="delete_id" value="<?php echo $row['id'] ?>"> 

そして、あなたは、Ajaxコードがに変わります -

$(".delete_button").click(function() { 
    var deleteid = $(this).data('deleteid'); 
    $.ajax({ 
     type: "POST", 
     url: "?action=delete", 
     data: "delete_id=" + deleteid , 
     success: function (result) { 
     if (result == 1) { 
      //window.location.assign("views/posts.php"); 
     } else { 
      alert("Error"); 
     } 
     } 
    }); 
    });