پاک کردن اطلاعات ارسالی با pusher توسط Ajax

سلام به همگی
برای ایجاد notification در پنل مدیریت وب سایت یک جدول در پایگاه داده ایجاد کردم که با استفاده از ajax اطلاعات نمایش داده شده را پاک می کنم. (از bootstrap toast ) برای نمایش استفاده می کنم. به صورت پیش فرض بعد از لود صفحه اطلاعات به راحتی با ajax پاک می شود ولی مشکل اینجاست وقتی که با pusher اطلاعات جدیدی را وارد می کنم تا هنگامی که صفحه reload نشود Ajax کار نمی کند.

Echo.private('Notification.user')
        .listen('userNotification', (e) => {
            var countDiv = ($('.toast').length) +1;
            var toastDiv = '<div class="toast" id="'+e.id+'"><div class="toast-header" style="flex-direction : row-reverse"><strong class="ml-0">'+e.section+'</strong><form class="delete-notification"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="id" class="mainId" value="'+e.id+'"><button type="submit" class="close" style="margin-right: 275px"><span aria-hidden="true">&times;</span></button></form></div><div class="toast-body" style="direction : rtl">'+e.text+'</div></div>';
            document.getElementById("dropdown-content").insertAdjacentHTML('beforeend', toastDiv);
            $('#badgeCount').text(countDiv);
        });

$(document).ready(function() {
        $('.delete-notification').on('submit', function(ej){
            ej.preventDefault();
            var id = $('.mainId').val();
            var _token = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                url: 'dashboard/notification/'+id,
                type: 'DELETE',
                dataType: "JSON",
                contentType : false,
                processData : false,
                headers : {
                    'X-CSRF-TOKEN' : _token
                },
            }).done(function(result) {
                var countDiv2 = ($('.toast').length) -1;
                $('#'+id).remove();
                $('#badgeCount').text(countDiv2);
            });
        });
    });