When I update one of the rows is perfect, the problem appears when I want to update another row. In addition to updating the selected row, the row that I updated earlier is updated, with the same data.
I leave you a capture of what happens: link
$(document).on("click", ".updateRow", function() {
var idUpdate = $(this).parent().parent().attr("id");
$(".titleUpdateModal").val( $(this).parent().parent().find(".titleRow").text() );
$(".descriptionUpdateModal").val( $(this).parent().parent().find(".desciptionRow").text() );
console.log(idUpdate);
$(document).on("click", ".btnUpdateModal", function() {
var JSON = {};
JSON.id = idUpdate;
JSON.title = $(".titleUpdateModal").val();
JSON.description = $(".descriptionUpdateModal").val();
$.post("api/update.php", JSON, function(data) {
getData();//imprime de nuevo los datos en pantalla
});
});
});
<div class="modal fade" id="updateModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<input class="form-control mb-2 titleUpdateModal" type="text" placeholder="Title">
<input class="form-control descriptionUpdateModal" type="text" placeholder="Description">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btnUpdateModal">Update</button>
</div>
</div>
</div>
</div>
Connection details
<?php
require 'Database.php';
$id = $_POST["id"];
$title = $_POST["title"];
$description = $_POST["description"];
$connection = new Database();
$sql = "UPDATE items SET title = ?, description = ? WHERE id = ?";
$query = $connection->prepare($sql);
$query->bindParam(1, $title);
$query->bindParam(2, $description);
$query->bindParam(3, $id);
$query->execute();
?>