Using Jquery click function with a div and not a class or an element

Question

i want to do something simple and i wasn't able to find the solution (maybe or probably because i used the wrong terms, sadly )

The main idea is my page look like this :

Button 1 - Button 2 - text - text - text - text
Button 1 - Button 2 - text - text - text - text
Button 1 - Button 2 - text - text - text - text
Button 1 - Button 2 - text - text - text - text

So i want the button 1 to do one things, and the button 2 to do other things,

$(document).ready(function(){
  $( 'btn-danger').click(function() {
$.ajax({
  type:'POST',
  url: 'script/supression_ligne.php',
  success: function(data) {
    alert(data);
    $("p").text(data);
      }
    })
  });
});

and here is the html

<button type="button" class="btn btn-success">...</button>

I can make it work for an ID or all of them, but not just for the class btn-danger

Also, i have one more question about the code, i saw on multiple reprise, people used the $(document).ready(function() before the actuel click, so i was wondering what is the point of doing that.

And since i am here, i guess i can ask all my questions :p I just want to be sure that i understand the logic of the Ajax part because i have never used it, if someone could explain me the different step it does once the request succeeds, i would really apprecite it

Thanks a lot :)

Answer 1

$(document).on('click','.button_class',function(){
 $.ajax({
  type:'POST',
  url: 'script/supression_ligne.php',
  success: function(data) {
    alert(data);
    $("p").text(data);
      }
    });
});