DataTables - Child rows

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
		<table id="MUTATIONSTATUS" class="table table-striped table-bordered table-hover center" align="center" style="width:100%">
                        <thead>
                        <tr>
			    <th></th>
                            <th style="text-align: center; vertical-align: middle">IGV Link</th>
                            <th style="text-align: center; vertical-align: middle">Gene<br/>hover:OMIM link</th>
			    <th style="text-align: center; vertical-align: middle">Variant Type</th>
                            <th style="text-align: center; vertical-align: middle">Exon#:Transcript:CD<br/>Indel hover:Mutalyzer</th>
                            <th style="text-align: center; vertical-align: middle">AA Change</th>
                            <th style="text-align: center; vertical-align: middle">Database References</th>
                            <th style="text-align: center; vertical-align: middle">Minor Allele Frequency(%)</th>
                            <th style="text-align: center; vertical-align: middle">Average QScore</th>
                            <th style="text-align: center; vertical-align: middle"><span class="frac">Minor/Major Allele Distribution (Fwd,Rev)</th>
			    <th style="text-align: center; vertical-align: middle; display:none">Gene</th>
                            <th style="text-align: center; vertical-align: middle; display:none">Chr:Pos</th>
                            <th style="text-align: center; vertical-align: middle; display:none">Base change</th>
			    <th style="text-align: center; vertical-align: middle; display:none">Database Ids</th>
                            <th style="text-align: center; vertical-align: middle; display:none">Minor Allele Frequency</th>
			 ...

CSS

td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

/* Formatting function for row details - modify as you need */
function format ( d ) {
     return '<table id="mchild" name="mchild" class="table-responsive table-bordered table-hover table-sm table-striped">'+
           '<thead><tr><td><strong>Filter</strong></td>'+
                       '<td><strong>Exomes</strong></td>'+
                       '<td><strong>Genomes</strong></td>'+
                       '<td><strong>Total</strong></td>'+
                   '</tr>'+
           '</thead>'+
           '<tbody>'+
                   d+
           '</tbody>'+
        '</table>'
}


$(document).ready(function() {
    var table = $('#MUTATIONSTATUS').DataTable({});
    
     $('#mchild').DataTable({
                createdRow: (row, data, index) => {
                        console.log(data[2]);
                        if(data[2] === 'PASS') {
                                  row.querySelector(':nth-child(2)').classList.add('highlightg');
                        }else if(data[2].match(/FAIL/g)) { 
                                  row.querySelector(':nth-child(2)').classList.add('highlighto');
                        }
                        if(data[3].match(/PASS/g)) {
                                  row.querySelector(':nth-child(3)').classList.add('highlightg');
                        }else if(data[2].match(/FAIL/g)) { 
                                  row.querySelector(':nth-child(3)').classList.add('highlighto');
                        }
                }
        });

    // Add event listener for opening and closing details
   $('#MUTATIONSTATUS tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        //console.log(row.data());
        if ( row.child.isShown() ) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          // Open this row
         ...