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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs4/3.2.2/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
		<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)</span></th>

                             </thead>
                            <tbody>
<tr...

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

function format(filter, ac, an, af, faf, hz, doc) {
            var filters = filter.split(":");
            var acs = ac.split(":");
            var ans = an.split(":");
            var afs = af.split(":");
            var fafs = faf.split(":");
            var hzs = hz.split(":");
            var docs = doc.split(":");
            var td0class = "";
            var td1class = "";
            
            if(filters[0].match(/PASS/g)){td0class = '<td><span class="badge badge-pill badge-success">'+filters[0]+'</span></td>';}
                else{   
                        if(filters[0].match(/^No/g)){td0class = '<td><span class="badge badge-pill badge-danger">'+filters[0]+'</span></td>';}
                        else{   
                                td0class = '<td><span class="badge badge-pill badge-warning">'+filters[0]+'</span></td>';
                        }
                }
            
            if(filters[1].match(/PASS/g)){td1class = '<td><span class="badge badge-pill badge-success">'+filters[1]+'</span></td>';}
                else{ 
                      if(filters[1].match(/^No/g)){td1class = '<td><span class="badge badge-pill badge-danger">'+filters[1]+'</span></td>';}
                      else{     
                                td1class = '<td><span class="badge badge-pill badge-warning">'+filters[1]+'</span></td>';
                        } 
                }          
           
           return '<table 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>'+
                   '<tr><td data-toggle="tooltip" data-placement="top" title="Quality filter"><strong><u>Filter</u></strong></td>'+ td0class + td1class...