I used jquery load method to refresh table after ajax post request and it works well for first time and after load the div next time I try to send ajax request again it doesn't refresh the div and events force to not work without reload full page.

// post request for add canonical

     $('#addCanonical').click(function(e){
        e.preventDefault();
        
        $('#exampleModal1 .modal-title').html('Edit Canonicals');
        
      $('#exampleModal1 form input').attr('value','canonical');
      $('#exampleModal1 form input').css('pointer-events', 'none');
        $('#modal-btn1').click();
    
     $('#exampleModal1 form').submit(function(e){
         e.preventDefault();
         
         let formData = $(this).serialize();
            $.ajax({
            type:'post',
            url:'https://awarno.com/ajax.php',
            data:formData+"&addSeo=true&pid=<?php echo $ref_id ;?>&page=<?php echo $page ;?>",
            success:function(res){

                    console.log('form add seo');
                
               $('#exampleModal1 form input').css('pointer-events', 'all');
                $('.btn-close').click();

                   $('#seo-table-ref').load(location.href + " #seo-table-ref");
                
                
            }
        });
     });