dynamic colspan mix object with string, numbers, date string in c# javascript

Question

The issue is in Bottom and Top performance columns are dynamic, I need to set colspan by dynamic no of columns, i select 1 to no of months of period (mm-yyyy) in 2023 or other year. abc to region static or fixed columns. Please check dummy snippet. my Requirement is

• colspan dymanic
• Bottom Performance - background red
• Top Performance - background green
• 01-2023 (mm-yyyy) format to Jan-2023
• 01-20231 remove last 1 and make Jan-2023 - from all columns remove 1

I have Json data like,

var ReportResult = [
{
    "01-2023": "100", "02-2023" : "100", "01-20231" : "100", "02-20231" : "100", "03-2023" : "100", "03-20231" : "100", "abc" : "ALL", "abc_max" : "ALL", "xyz" : "ALL", "xyz_max" : "ALL"
}
]

and my code is:

var ReportResult = [{
  "01-2023": "100",
  "02-2023": "100",
  "01-20231": "100",
  "02-20231": "100",
  "03-2023": "100",
  "03-20231": "100",
  "abc": "ALL",
  "abc_max": "ALL",
  "xyz": "ALL",
  "xyz_max": "ALL"
}];

var selector = document.getElementById("customTable");
var columns = addAllColumnHeaders(ReportResult, selector);

for (var i = 0; i < ReportResult.length; i++) {
  var row$ = $('<tr/>');
  for (var colIndex = 0; colIndex < columns.length; colIndex++) {
    var cellValue = ReportResult[i][columns[colIndex]];
    if (cellValue == null) cellValue = "";
    row$.append($('<td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; " />').html(cellValue));
  }
  $(selector).append(row$);
}

function addAllColumnHeaders(ReportResult, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  var Topheader$ = $('<tr />');
  Topheader$.append($('<th colspan="4" />'));
  Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Bottom Performance"));
  Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Top Performance"));
  for (var i = 0; i < ReportResult.length; i++) {
    var rowHash = ReportResult[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {

        columnSet.push(key);
        headerTr$.append($('<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html(key));

      }
    }
  }
  $(selector).append(Topheader$);
  $(selector).append(headerTr$);

  return columnSet;
}

.Bottom_performer {
  background: red;
}

.Top_performer {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="customTable"></table>

Desired output:

.Bottom_performer {
  background: red;
}

.Top_performer {
  background: green;
}

<table>
  <tr>
    <th colspan="4"></th>
    <th colspan="3" class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Bottom Performance</th>
    <th colspan="3" class="Top_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Top Performance</th>
  </tr>
  <tr>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">abc</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">xyz</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">ProFamily</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Region</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">01-2023</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">02-2023</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;"> no of columns</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">01-20231</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">02-20231</th>
    <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">no of columns</th>
  </tr>
  <tr>
  </tr>
  <tr>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">no of data</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
    <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">no of data</td>
  </tr>
</table>

Thanks in Advance, anybody please help me. I try with lots of time.