PHP & AJAX Löschen funktioniert nur mit der ersten Zeile

Question

Ich habe ein einfaches PHP-Blog-System erstellt. Auf der Seite "Beitrag hinzufügen" kann der Benutzer einen Titel und Text eingeben. Die Posts befinden sich auf der Post-Seite, auf der der Benutzer die Posts löschen kann.

Mein Problem ist: Nur der erste Beitrag kann gelöscht werden. Die anderen nicht.

Hier ist mein Code für die Show der Pfosten:

<?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> 

Und das ist mein AJAX-Code:

$("#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

Sie können nicht gleiche ID für mehr Ein-/div oder andere HTML-Tags verwenden. Bitte ändere id = "deletid" in class = "deleteid" und ändere auch dein Click Event. Also Sie wird diese Zeile ändern -

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

Und Sie werden Ajax-Code ändern -

$(".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"); 
     } 
     } 
    }); 
    });