How can I manage child rows in DataTables using AJAX – Jquery ajax

I am trying to bind a child table to a parent table with drill-down [build a DataTable where the main table data row can be expanded to show an embedded child row data] I follow Ajax loaded row details blog this

I am not able to figure out how this can be managed when the data for the child table is coming through a separate AJAX call which then creates a dynamic table build a child DataTable where each row can be expanded to show an embedded parent DataTable

I had already managed it through an ajax call, and data coming from DB as except
every time I open drill down it adds new <tr> into the parent table for child row that’s why the child table <tr> layout tables Exceed their Size from a parent table

I add an image table view for reference please review the table structure

Here the table structure after drill down open how it appends the <tr> inside the parent table according to it’s raw table structure

below is the code

// Add event listener for opening and closing details
    $('#my-table tbody').off('click', 'td.details-control');
    $('#my-table tbody').on('click', 'td.details-control', function () {
        tr = $(this).closest('tr');
        console.log(tr);
        row = exporterListTable.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(Details(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

and then the format() will be

    function format ( rowData ) {
        div = $('<div/>')
            .addClass( 'loading' )
            .addClass( 'table_child')
            .text( 'Loading...' );
        $.ajax( {
            url: 'get-table-items(details)',
            data: {
                yearMonth: rowData[1],
                productFilterName
            },
            dataType: 'json',
            success: function ( json ) {
                div.html(json)
                div.removeClass( 'loading' )
                if(json.length > 0){
                    div.append("<tr><th>TABLE FIELD</tr>")
                    var len = json.length;
                    for (var i = 0; i < len; i++) {
                        div.append("<tr><td>"+JSON+"</td></tr>");
                    }
                }
            }
        } );
            return div;
    } 

and here is an ajax call

 function ExportersDetails ( rowData ) {
        div = $('<div/>')
            .addClass( 'loading' )
            .addClass( 'table_child')
             .addClass('table-responsive')
            .text( 'Loading...' );
        $.ajax( {
            url: 'get-exporters-details',
            data: {
                exporter: rowData[1],
                overallFilter
            },
            dataType: 'json',
            success: function ( json ) {
                div.html(json)
                div.removeClass( 'loading' )
                if(json.length > 0){
                    div.append("<tr><th>TABLE FIELD</th></tr>")
                    var len = json.length;
                    for (var i = 0; i < len; i++) {
                        div.append("<tr><td>"+JSON+"</td></tr>");
                    }
                }
            }
        });
        return div;
    } 

please help me to add the <table> before the <tr> tag add, I already made many changes seems doesn’t help!