Why do not all buttons call a function if there are several of them?

Question

JavaScript

Hello.

I delete records using ajax
There are several records on the page and each has a Delete button
When clicked, the ajax script is called, then we send a request to php and delete
Everything is ok with this, it deletes

But, I don’t press buttons if it is not 1st, if 2 and no more pressing. Is this due to the fact that I have one id specified or what?

Here is the code:

<a class='dropdown-item red' id='reviews-delete' data="".$row->id."">Удалить</a>

$(document).ready(function(){
$('#reviews-delete').on('click', function (){
   var del_id = $(this).attr('data');
   $.ajax({
      type:'POST',
      url:'delete.php',
      data:'delete_id='+del_id,
      success: function(data) { 

      setTimeout(function(){
      window.location.reload(false); 
      }, 1000);
         }
   });
 });
});

Answer 1

I would put a handler on a button <a onclick='doSomething'>Удалить</a>
or class
$(document).ready(function(){
$('.reviews-delete').on('click', function (){
var del_id = $(this).attr( 'data');
$.ajax({
type:'POST',
url:'delete.php',
data:'delete_id='+del_id,
success: function(data) {
setTimeout(function(){
window.location. reload(false);
}, 1000);
}
});
});
});

Answer 2

you watch when you click exactly for

reviews-delete

use delegation to keep track of which button is clicked
raise 'reviews-delete' above the buttons and catch through
event.target

Answer 3

Is this due to the fact that I have one id specified or what?

Exactly.
Use a class

<a class='dropdown-item red reviews-delete' data="".$row->id."">
  Удалить
</a>

$('.reviews-delete').on('click', function (){
 // ...
});