Script tag is not working properly in a string in javascript functions

Question

I am using jquery datatables and I am trying to add multiple rows for a single row for particular columns by using drawCallBack Function. By giving the hardcoded values for table data I am able to achieve the results as expected and all the datatable features are working fine.

Here is the JsFiddle for the working code.

But when i am trying to add the data to table body using a function which contains dynamic json data, the results are not as expected. I am storing extra rows in a script tag and calling drawCallBack function to add the extra rows in the script tag. The script tag is not working properly. I have tried escaping, async but none works

Here is the JsFiddle, I want to achieve the results for this data as in the first fiddle.

$('.datatable').DataTable({
  "fnDrawCallback": function() {

    $table = $(this);

    // only apply this to specific tables
    if ($table.closest(".datatable-multi-row").length) {

      // for each row in the table body...
      $table.find("tbody>tr").each(function() {
        var $tr = $(this);
        // get the "extra row" content from the <script> tag.
        // note, this could be any DOM object in the row.
        var extra_row = $tr.find(".extra-row-content").html();
    
        // in case draw() fires multiple times, 
        // we only want to add new rows once.
        if (!$tr.next().hasClass('dt-added')) {
          $tr.after(extra_row);
          $tr.find("td").each(function() {

            // for each cell in the top row,
            // set the "rowspan" according to the data value.
            var $td = $(this);
            var rowspan = parseInt($td.data("data-datatable-multi-row-rowspan"), 10);
            if (rowspan) {
              $td.attr('rowspan', rowspan);
            }
          });
        }

      });

    } // end if the table has the proper class
  } // end fnDrawCallback()
});

.wrapper {
  margin: 20px;
  font-family: sans-serif;
}

td,
th {
  vertical-align: top;
  border: 1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" defer></script>
<div class="wrapper">


   <table class="datatable datatable-multi-row" id="tpsRequestData">
            <thead>
            <tr>
                <th scope="col" >Version/Region/Fleet</th>
                <th scope="col" >VIP</th>
                <th scope="col">Request Id</th>
                <th scope="col" >SimUrl</th>
                <th scope="col" id="serviceInput">Service Name</th>
                <th scope="col">TCDA API</th>
                <th scope="col">Current Provisioned TPS</th>
                <th scope="col">New Requested Tps</th>
                <th scope="col">Cumulated TPS</th>
                <th scope="col">Max Tps</th>
                <th scope="col">Stable TPM</th>
                <th scope="col">AzRedundancy Factor</th>
                <th scope="col">Buffer</th>
                <th scope="col">Current Host Count</th>
                <th scope="col">Hosts Required</th>
            </tr>
            </thead>
            <tbody id="tpsRequestsBody">
            <tr><td data-datatable-multi-row-rowspan="1">TransContainerDataAuthorityService/NA/BATCH</td><td data-datatable-multi-row-rowspan="1">tcp<td data-datatable-multi-row-rowspan="1">1648761053928062</td><td data-datatable-multi-row-rowspan="1">https://issues/TCDA-13646</td><td>urn:cdo:TransportDocumentGenerationService:AWS:Default</td><td>GetFilteredContainersByAttrs</td><td>-1</td><td>750<td data-datatable-multi-row-rowspan="1">751</td><td data-datatable-multi-row-rowspan="1">2118</td><td data-datatable-multi-row-rowspan="1">11517</td><td data-datatable-multi-row-rowspan="1">1.125</td><td data-datatable-multi-row-rowspan="1">1.07</td><td data-datatable-multi-row-rowspan="1">16</td><td data-datatable-multi-row-rowspan="1">2</td></tr>
            
            
            <tr><td rowspan="1">TransContainerDataStorage/EU/Tier2</td><td rowspan="1">tcp<td data-datatable-multi-row-rowspan="1">1647453032492965</td><td data-datatable-multi-row-rowspan="1">https://issues/TCDA-13607</td><td>urn:cdo:ShipmentTrackingAndResolutionService:AWS:Default</td><td>GetTransDocumentByAttrs</td><td>-1</td><td>75<td data-datatable-multi-row-rowspan="1">76</td><td data-datatable-multi-row-rowspan="1">4140</td><td data-datatable-multi-row-rowspan="1">20163.2</td><td data-datatable-multi-row-rowspan="1">1.35</td><td data-datatable-multi-row-rowspan="1">1.4</td><td data-datatable-multi-row-rowspan="1">39</td><td data-datatable-multi-row-rowspan="1">0</td></tr>
            
            
            <tr><td data-datatable-multi-row-rowspan="1">TransContainerDataAuthorityService/FE/BATCH</td><td data-datatable-multi-row-rowspan="1">tcp<td data-datatable-multi-row-rowspan="1">1648761053928062</td><td data-datatable-multi-row-rowspan="1">https://issues/TCDA-13646</td><td>urn:cdo:TransportDocumentGenerationService:AWS:Default</td><td>GetFilteredContainersByAttrs</td><td>-1</td><td>750<td data-datatable-multi-row-rowspan="1">751</td><td data-datatable-multi-row-rowspan="1">805</td><td data-datatable-multi-row-rowspan="1">3770.4</td><td data-datatable-multi-row-rowspan="1">1.8</td><td data-datatable-multi-row-rowspan="1">1</td><td data-datatable-multi-row-rowspan="1">10</td><td data-datatable-multi-row-rowspan="1">35</td></tr>
            
            <tr><td rowspan="3">TransContainerDataStorage/EU/Tier2</td><td rowspan="3">http<td rowspan="1">1649275442388303</td><td rowspan="1">https://issues/TCDA-13665</td><td>OPEXOrchestratorService</td><td>GetTransDocumentByClientContainerId</td><td>-1</td><td>5<td rowspan="3">303</td><td rowspan="3">3495</td><td rowspan="3">25204</td><td rowspan="3">1.35</td><td rowspan="3">1.33</td><td rowspan="3">9</td><td rowspan="3">7</td> 
         
            
              <script type="x/template" class="extra-row-content"> 
              <tr>
            <td rowspan="2">1645665298069234</td><td rowspan="2">https://issues/TCDA-13547</td><td>TrackingIdValidationService</td><td>GetTransDocumentByAttrs</td><td>-1</td><td>125</td>
            <tr><td>TrackingIdValidationService</td><td>GetTransDocumentById</td><td>-1</td><td>170</td></tr>
             </script> 
             </tr>
            </tbody>
        </table>
  
</div>