récupérer le bon name en JQUERY

Bonjour,

J'ai effectué un tableau des pays avec un boutton qui me donnera le détail des sportifs de chaque pays et j'aimerais que ma page ne se refresh pas à chaque clique du boutton et donc j'ai vue qu'il fallait utiliser de l'AJAX mais je sais pas comment détecter le bon boutton avec le bon name quand je fait mon .click() en jquery, voila mes différents codes

mon formulaire :

 <td>
      <form action="" method="post" name="form_{{ aCountries.theCountries }}" id="form_{{ aCountries.theCountries }}">
              <input name="countries" type="hidden" value="{{ aCountries.theCountries }}" />
              <button class="btn btn-primary" type="button" name="detail_{{ aCountries.theCountries }}" id='detail_{{ aCountries.theCountries }}'      data-target="#modalCompet" data-toggle="modal">Detail</button>
        </form>
</td>

mon Ajax :

  $('detail_idBoutton').click(function() {
        //extract the name of the button clicked
        var id = $(this).attr('name');
        //get the button id from name.
        var buttonId = id.split('detail')[1];
        $.ajax({
            type: "post",
            url: "MVC/requestAjax/displayCptrByCtrs.php",
            data: $("#form_" + buttonId + "").serialize(),
            success: function() {
                console.log('coucou')
            },
            error: function () {
               alert("FAILED");
            }
        });
      });