Dialog initialization duplication

[razorkyle]

when using dialog, it duplicates the initialization and contents of selected element for dialog, the element is loaded from ajax so i need to use remove() first before re-initialization

jQuery 3.7.1
jQuery-UI 1.13.3

if ($('div#salary-table-dialog.ui-dialog-content').length > 0) {
    $('div#salary-table-dialog.ui-dialog-content').remove();
}

if ($('div#position-form-dialog.ui-dialog-content').length > 0) {
    $('div#position-form-dialog.ui-dialog-content').remove();
}

$(".dialog").dialog({
    autoOpen: false,
    width: 1024,
    modal: true
});

[razorkyle]

i got the some solution, instead of removing, i appended to <section id="content"> where every load of the content, it will empty first the <section> before appending the content

function loadContent( content ) {
    $("section#content").empty();
    $("section#content").html( content );

    if ( request === "position-list" ) {
        $(".dialog").dialog({
            autoOpen: false,
            appendTo: 'section#content',
            width: 1024,
            modal: true
        });
    }
}