DataTable with a child dataTable - Having trouble with reinitialization

Man123

I have a data table which has details control every row. and when clicked on it, it shows another data table.
I am trying to close the shown row when a second row is clicked, but i still get the database re initialization error. Can someone help?

var anOpen = [];
var oInnerTable;
$(document).ready(function () {
var itable = $('#myRequirements').html();

var oTable = $('#myTeam').dataTable({
    "bJQueryUI": true,
    "sDom": 'lfrtip',
    "bServerSide": false,
    "sAjaxSource": "/NPP/FunctionTeamTable/",
    "bProcessing": true,
    "bFilter": false,
    "bInfo": false,
    "bLengthChange": false,
    "bPaginate": false,
    "bSort": false,
    "columns": [
              {
                  "className": 'details-control',
                  "orderable": false,
              },
              {
                  "className": "dt-center",
                  "orderable": false,
                  "sClass": "styleItem"
              },
            {
                "className": "dt-center",
                "orderable": false,
                "sClass": "styleItem"
            }
    ]

});


var table = $('#myTeam').DataTable();



// Add event listener for opening and closing details
$('#myTeam tbody').on('click', 'td.details-control', function () {

    var tr = $(this).closest('tr');

    var nTr = this.parentNode;
    var i = $.inArray(nTr, anOpen);

    if (i == -1) {
        var iPos = oTable.fnGetPosition(nTr);
        var Team = table.column(1).data()[iPos];

        var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(itable, iPos, Team), 'details');
        $('div.innerDetails', nDetailsRow).slideDown();
        anOpen.push(nTr);
        var name = '#inner' + iPos;
        //Initialize 2nd level datatable
         oInnerTable = $('#myRequirements').DataTable({
            "bJQueryUI": true,
            "sDom": 'lfrtip',
            //"destroy":true,
            "bServerSide": true,
            "sAjaxSource": "/NPP/RequirementLines?Project=" + "SKL Y W"+ "&" + "Team=" + Team,
            "bProcessing": true,
            "oLanguage": {
                "sEmptyTable": "There is no Data to be displayed here"
            },
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.getJSON(sSource, aoData, function (json) {

                    if (json == null || json.aaData == "") {
                        var newtr = "<h5 style=\"color: steelblue;text-align:center\"><b>There is no data available</b></h5>";
                         oInnerTable.replaceWith(newtr);
                        fnCallback(json);
                    } else {
                        fnCallback(json);
                    }
                });
            },
            "fnCreatedRow": function (nRow, aData, iDataIndex) {
                $('td:eq(4)', nRow).html("<form name = 'myForm' action='#' id='myForm'><input name='Quantity' style='background-color: #ccffcc' id='Qty" + iDataIndex + "'" + "type='number' value='' min=1 max=1000 title='Qty in numbers less than 1000' required/> <input name='Justification' style='background-color: #ccffcc' type='text' id='Just" + iDataIndex + "'" + " title='Justification' required/><input type='submit' name='SubmitForm' id='submitForm" + iDataIndex + "'" + "value='submit' onclick='SubmitReqs(this.form," + iDataIndex + ", this)'/></form>");
            },
            "bFilter": false,
            "bInfo": false,
            "bLengthChange": false,
            "bPaginate": false,
            "bSort": false,
          //  "destroy":true,
            "aoColumns":
               [

                {
                    className: "dt-center",
                    "orderable": false,
                    "defaultContent": "<i>No Values Found</i>"

                },
               {
                   className: "dt-center",
                   "orderable": false,
                   "defaultContent": "<i>Not set</i>"

               },
                 {
                     "bVisible": false
                 },
               {
                   "bVisible": false
               },

               {
                   className: "dt-center",
                   "orderable": false,
                   "defaultContent": "<i>Not set</i>",
               },

               {
                   className: "dt-center",
                   "orderable": false,
                   "defaultContent": "<i>Not set</i>",

               },
               {
                   className: "dt-center",
                   "defaultContent": "<i>Not set</i>",
                   "orderable": false,


               },
               {
                   className: "dt-center",
                   "orderable": false,
                   "defaultContent": "<i>Not set</i>",

               }

               ],
                         });
    }

    else {
        oTable.fnClose(this.parentNode);
        anOpen.splice(i, 1);
        event.stopPropagation();
    }
});

    $('#myTeam tbody').on('click', 'tr', function () {
 //   $('#myRequirements').dataTable().fnDestroy();
    var tr = $(this).closest('tr');
    var row = oTable.api().row(tr);
    if ($(this).hasClass('selected')) {
        //changes the details control to expand
        $(this).removeClass('shown');
        $(this).removeClass('selected');
    }
    else {
      //  $('#myRequirements').dataTable().fnDestroy();
        if (table.row('.shown').length) {
            $('td.details-control', table.row('.shown').node()).click();
        }
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        //changes the details control to collapse
        table.$('tr.selected').addClass('shown');
    }
});

});