Jquery-ajax success: triggered twice (jquery 3.5.1)

Question

I need your help. I have this code that works but sometime (it happens randomly) the success event is triggered twice and I would like to understand why.. May you help me please to understand what is wrong?

The "problem" with the success event triggered twice is that it seems that the script delete multiple rows in one time instead of deleting only one.

$(document).ready(function(){
  $(document).on('click', '.delc', function(e) {
    e.preventDefault();
    console.log("click");
    var id2 = $(this).closest(".delc").attr('rel');
    var item = $(this).parent().parent();
    data_2 = 'id=' + id2;
    $('#mdl-avviso-customer').modal('show');
    $('#del-btn-customer').on('click', function(e){
        e.preventDefault();       
        $.ajax({
          url: 'php/del_customer.php',
          type: 'post',
          data: data_2,
          cache: false,
          success: function(html){
            $(item).fadeOut(300,function(){
                $(item).remove();
              });
          }
        });
    });
  });
});

Answer 1

Correct code down below:

$(document).ready(function(){
      var id;
      var item;
      var data;
      $(document).on('click', '.delc', function(e) {
          e.preventDefault();
          console.log("click");
          id = $(this).closest('.delc').attr('rel');
          item = $(this).parent().parent();
          data = 'id=' + id;
          $('#mdl-avviso-customer').modal('show');
        });
        $('#del-btn-customer').on('click', function(e){
            e.preventDefault();     
            $.ajax({
              url: 'php/del_customer.php',
              type: 'post',
              data: data,
              cache: false,
              success: function(html){
                $(item).fadeOut(300,function(){
                    $(item).remove();
                  });
              }
            });
        });  
    });