I have a jquery datatable on my page. This datatable is gonna show data based on a request made to my api

The HTML that I have is like the following:

```
<table id="details" class="table table-bordered table-hover table-striped nowrap hidden display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Patient Full Name</th>
            <th class="hidden">LF</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>&nbsp;</th>
            <th>Patient Full Name</th>
            <th class="hidden">LF</th>
        </tr>
    </tfoot>
    <tbody>
        <tr id="dummytr2"><td style="text-align:center;padding-top:20px;" colspan="7"><p><em>No Data Available</em></p></td></tr>
        </tbody>
</table>

```

The first `<th>` is gonna be used to collapse the tr and get the facility (the third `<th>` or the hidden one) of this patient.

I have a dummy `<tr>` in the table because I don't want to initialize the datatable at the beginning so I don't get the error message that tells me that I can't initialize my datatable twice.

The request to my api is gonna be triggered through a bunch of buttons like the following:

```
$.ajax({
            url: "https://" + window.myLocalVar + "/api/metrics/GetDetails?metricName=" + metric,
            type: "GET",
            dataType: 'json',
            contentType: 'application/json',
            success: function (requests) {

                if (requests.length > 0) {
                    $("#dummytr2").remove();
                    for (var i = 0; i < requests.length; i++) {
                        var patient_name = requests[i].PatientFullName;
                        var lab_facility = requests[i].LabFacility;

                        tr = '<tr>\
                                    <td class=" details-control"></td>\
                                    <td>' + patient_name + '</td>\                                 
                                    <td class="hidden">' + lab_facility + '</td>\
                                </tr>';

                                $("#details > tbody").append(tr);

                                //click event for each tr
                                $('#details tbody').on('click', 'td.details-control', function () {
                                    var tr = $(this).closest('tr');
                                    var row = table.row(tr);

                                    if (row.child.isShown()) {
                                        // This row is already open - close it
                                        row.child.hide();
                                        tr.removeClass('shown');
                                    } else {
                                        // Open this row
                                        row.child(format(row.data())).show();
                                        tr.addClass('shown');
                                    }
                                });
                        }  
                    }
                // NOT SURE WHY IT IS NOT WORKING    
                $('#details').dataTable().fnDestroy();

                var table = $('#details').DataTable({
                    "scrollX": true,
                    stateSave: true,
                    "columns": [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        { "data": "PatientFullName" },
                        { "data": "LabFacility" }
                        ],
                    "order": [[1, 'asc']]
                });
            },
            error: function (err) {
                if (err) {
                    console.log(err);
                }
            }
        });
    });

function format(d) {
    // `d` is the original data object for the row
    var lf = d.LabFacility;
    if (lf == "") {
        lf = "No Lab Facility"
    }
    // wrapping text is not working???
    return '<div class="table-responsive"><table class="table display" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
         '<tr>' +
            '<td>Lab Facility:</td>' +
            '<td>' + lf + '</td>' +
        '</tr>' +
    '</table></div>';
}

```

This ajax request is gonna get called each time a button is clicked. This means the content of my datatable is going to change each time a button was clicked. I tried to clear and refill it did not work.. I tried to destroy it .. it did not work.. each time I destroy my datatable and execute the script it won't change the content of the table.

I am not sure what's wrong with my code. My code works only for the first time.. the second time you click a button, it won't update my datatable.

Thanks!