How to get the proper value from button click in array of buttons with the same name?

I am working with laravel/ajax and I want to create a delete button for every row in the content table. So in my foreach (in my view) I am creating delete buttons with the same name and different values.

 <button value="" name="destroy"><i class="zmdi zmdi-delete zmdi-hc-fw"></i></button>

Now I have a jquery ajax call:

 $('button[name="destroy"]').on('click', function(e) {

    swal({
        title: "Are you sure?",
        text: "Once you delete this row, you can not rollback it",
        type: "warning",
        showCancelButton: true,
        buttonsStyling: false,
        confirmButtonColor: '#dd394a',
        confirmButtonText: 'Yes, I am sure!',
        cancelButtonText: "No, cancel it!",
        background: 'rgba(0, 0, 0, 0.96)',
        confirmButtonClass: 'btn btn-sm btn-light',
    }).then(function() {

        $.ajax({

            url: 'Groupe/destroy/'+ $('button[name="destroy"]').trigger('change').val(),
            type: 'POST',

            success: function(data)
            {
                $('.modal-content').html(data);
            }
        });
    });
});

After doing this, every button click (when I write an alert in my success part with $('button[name="destroy"]').trigger('change').val() ) returns the same first value, feels like it always reads the value from the first button in the row and repeats it for all the others. (In the inspect element every button has a different ID). What am I missing ? Thank you

via Chebli Mohamed