I have run across some issues while trying to implement Datatable on a dialog popup. Below is my code: HTML Code

<a href="#" onclick="loadData();"><span class="onlineCounter bigtext">Show Counter</span></a></div>

<div id="loadCounterInfo" style="min-height:400px; height: 450px;">
    <table id="loadCounterTable">
        <thead>
            <tr>
                <th>Vehicle Name</th>
                <th>Time</th>
            </tr>
        </head>
        <tbody>
            <tr>
                
            </tr>
        </tbody>
    </table>
</div>

My Javascript code for dialog below:

$("#loadCounterInfo").dialog({
        autoOpen: false,
        width: "450",
        height: "550",
        minHeight: "500",
        resizable: false,
        close: function(e, ui){
            console.log("Closed LoadCounterInfo");
        },
        open: function(){
          loadDatatableInfo();
            console.log("Opened LoadCounterInfo");
        }
    });

I have two javascript functions:

function loadData(){
    
    $('#loadCounterInfo').dialog('open');
      
}
function loadDatatableInfo(){
    var tabl = $('#loadCounterTable').DataTable({
        paging: true,
        scrollY: 300,
        retrieve: true,
        ajax: {
            url: "func/fn_dashboard.php?cmd=load_online_info"
        },
        columns: [
            {data: 'veh_name'},
            {data: 'status_time'}
        ]
    });
}

When ever I click the Show Counter link, A dialog is created as desired and console.log("Open LoadCounter") shows on the console, likewise when I close it.

If I should close the dialog and open it for the second time, I experience a transparent background and the dialog does not load properly, The Datatable information is still loaded but seems overlayed, I do not understand what is going on here. if I should comment out the loadDatatableInfo, only the dialog works perfectly well even when i close and open it hundreth time..