Test Fiddle 1

HTML

<html>
<head>

  <link href="https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.dataTables.min.css" rel="stylesheet">
      <script src="https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.min.js"></script>
      <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

          <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
          <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>

  <div class="table-responsive">
  <table class="stripe row-border order-column" id="example11" name="example11" style="width:100%">
    <thead>
      <th style="width:60px"></th>
      <th>Staff</th><th>Work Type</th>
      <th>05-01-2022</th><th>06-01-2022</th>
      <th>07-01-2022</th><th>10-01-2022</th>
      <th>11-01-2022</th><th>12-01-2022</th>
      <th>13-01-2022</th><th>14-01-2022</th>
      <th>17-01-2022</th><th>18-01-2022</th>
      <th>19-01-2022</th><th>20-01-2022</th>
      <th>21-01-2022</th><th>24-01-2022</th>
      <th>25-01-2022</th><th>26-01-2022</th>
      <th>27-01-2022</th><th>28-01-2022</th>
      <th>31-01-2022</th><th>01-02-2022</th>
      <th>02-02-2022</th><th>03-02-2022</th>
      <th>04-02-2022</th><th>07-02-2022</th>
      <th>08-02-2022</th><th>09-02-2022</th>
      <th>10-02-2022</th><th>11-02-2022</th>
      <th>14-02-2022</th><th>15-02-2022</th>
      <th>16-02-2022</th><th>17-02-2022</th>
      <th>18-02-2022</th><th>21-02-2022</th>
      <th>22-02-2022</th><th>23-02-2022</th>
      <th>24-02-2022</th><th>25-02-2022</th>
      <th>28-02-2022</th><th>01-03-2022</th>
      <th>02-03-2022</th><th>03-03-2022</th>
      <th>04-03-2022</th><th>07-03-2022</th>
      <th>08-03-2022</th><th>09-03-2022</th>
      <th>10-03-2022</th><th>11-03-2022</th>
      <th>14-03-2022</th><th>15-03-2022</th>
     ...

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
        td.details-control {
            background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
        }

JavaScript

function format(value) {
  		
        let newtext1 = value[0].replaceAll('|', '"');
        let newtext2 = value[1].replaceAll('|', '"');
        return  '<tr>' + newtext1 + '</tr>' +  '<tr>' + newtext2 + '</tr>' ;
    }
  
 
$(document).ready(function(){
    
  var table11 = $('#example11').DataTable();
  
table11.on('click', 'td.details-control', function () {

								
                   var tr = $(this).closest('tr');
                   var row = table11.row(tr);
                   var teststring = new Array(tr.data('child-value-1'),tr.data('child-value-2'));
 
                   /*var childNodes = $();
                   for (var c of teststring.children){
                       childNodes = childNodes.add(c);
                   }*/
                    
                   if (row.child.isShown()) {
                       // This row is already open - close it
                       row.child.hide();
                       tr.removeClass('shown');
                   } else {
                       // Open this row
                       row.child(format(teststring)).show();
                       tr.addClass('shown');
                   }
               }
               );
});