I have a simple table that manages a list of user created posts. Inside the table, I have two buttons that are supposed to manage the edit or the deletion of the single posts.
I have a problem with these buttons, when I try to edit one entry that isn't the first one listed, no actions occur. How i can manage this? I know that every button need an unique id, but i can't figure out how to fix this because the buttons are dynamically generated with a php for()
loop.
<tbody>
<? for($n=0;$n<count($load);$n++): ?>
<tr>
<th scope="row"><? echo $n; ?></th>
<td class="postListTitle"><? echo $load[$n]['post_title']; ?></td>
<td id="postListDate"><? echo $load[$n]['post_date']; ?></td>
<td class="button-group"><button class="btn btn-warning btn-sm" id="btn-edit-post">Edit</button><button class="btn btn-danger btn-sm" id="btn-delete-post">Delete</button></td>
</tr>
<? endfor; ?>
</tbody>
Jquery code:
$('#btn-edit-post').on('click',function(e){
e.preventDefault();
var postTitle = $('.postListTitle').html();
$.ajax({
url:'system/ajax/doPost.php?title='+encodeURIComponent(postTitle),
type:'GET',
cache: false,
success: function(item){
var post = JSON.parse(item);
$('#edit-title').attr('value',post.title);
$('#edit-text').append(post.text);
}
});
});