How to pass ajax data from a loop?

Question

JSON

Good day. I broke my brain, I decided to ask the question all the same. In general, there is a while loop that displays messages with a unique id, of course, under it there is supposedly a link that calls the modal window

<a href="#" data-toggle="modal" data-target="#myModal">

in the modal window, confirmation about deleting the message and the cancel and delete buttons.

Task: via ajax when clicking, probably via get, send a request, since the page link has variables index.php?id=<?=$id?>&page=<?=$page?>
request with the post id and get it higher, to substitute in the request to delete the post, actually everything.

got the link like this

<a class="block" href="#">sdfsdfsdf</a>

<script>$(document).ready(function() {
   
  $('.block_one').click(function() {
    
  alert('fgdfgdfg');  
  })
  
});</script>

I have as many as 10 notifications opened, that is, under each of the 10 messages, the link is not unique, how to unify it is probably the main component of the question here.

PS Is it still possible to delete messages using ajax without reloading? That is, after everything done above, we press the delete button in the modal window and it disappears from the page? Some strange bicycle appeared in my head, assign a div with an id to each message and, when the button is pressed, make a request to the database for deletion, and so that it disappears without reloading, hide it via css on the page. Are there any better ways than mine? Or do you need to load all messages initially on ajax?

Answer 1

You can try to set the message ID from the database for each link to delete, then when you click on the link, display a modal window, hang an id on the delete button, for example, deleteMessage.
"Delete" button in modal window
Delete links that invoke a modal window and contain an ID from the database

<a class="delete" data-toggle="modal" id="1" data-target="#exampleModalCenter">✖</a>
<a class="delete" data-toggle="modal" id="2" data-target="#exampleModalCenter">✖</a>
<a class="delete" data-toggle="modal" id="3" data-target="#exampleModalCenter">✖</a>
<a class="delete" data-toggle="modal" id="4" data-target="#exampleModalCenter">✖</a>

var delete_id;

$('.delete').click(function (event) {
    delete_id = event.target.id;
});

$('#deleteMessage').click(function () {
    $.ajax({
        url: '/deleteMessage',
        data: {delete_id: delete_id},
        method: 'POST',
        success: function () {
            // Дальнейшие действия
        }
    });
});

About hiding the modal window. Give the window an ID and then hide the window in success $('#modalID').modal('hide');