I am using SweetAlert1 which at the moment is just displaying static data and a ‘Cancel’ button which is labelled ‘Close’.

The issue I’m having is that the first time I click the button to show the SweetAlert for the first time works fine but when I click the ‘Cancel’ button and then click the button from another row in my DataTable, I get the following error message

Cannot set properties of null (setting ‘value’)

This is my JQuery button click

$(document).on({
click: function () {
    const btnName = this.name

    if (btnName === 'destination-btn') {
        const dests = $(this).closest("tr").find("input").val()
        console.log('dests: ', dests)
        const splitDests = dests.split(',')
        console.log('splitDests: ', splitDests)

        $(this).closest("tr").addClass('selectedTableRow')
        console.log('1: ', $('#menu').html())

        swal({
                 html: true,
                 allowOutsideClick: true,
                 allowEscapeKey: true,
                 showConfirmButton: false,
                 title: "",
                 showCancelButton: true,
                 cancelButtonText: 'Cancel',
                 closeOnCancel: true,
                 showCloseButton: true,
                 //text: '<span id="modal-content" style="text-align: left"><p style="margin-bottom: 1rem">Destinations for <span id="cp-name" class="text-info">' + $(this).closest("tr").find("td:eq(1)").text() + '</span> call plan.</p><ul id="menu"></ul></span>',
                 text: 'BOB'
             }, function (isconfirm) {
                if (!isconfirm) {
                    $('table tr').removeClass('selectedTableRow')
                    //console.log('2: ', $('#menu').html())
                    //$('#menu').empty()
                    //console.log('3: ', $('#menu').html())
                    $('#menu').empty().remove()
                    $('#modal-content').empty().remove()
                    $('#cp-name').empty().remove()
                }
            }
        )

        $('.showSweetAlert fieldset').remove()

        $.each(splitDests, function(index, value) {
            console.log('index: ', index)
            console.log('value: ', value)
          $("#menu").append("<li class='text-capitalize'>" + value + "</li>");
        });
    }
}

}, “button”);

I have tried Destorey but still, it doesn’t work and I have also cleared my variables