JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<table id="t01" cellspacing="0" cellpadding="0" class="table" style="margin-top:20px">
    <thead>
        <tr>
            <th class="sorting">Group_Main_ID</th>
            <th class="sorting">Group_Sub_ID</th>
            <th class="sorting">Item</th>
            <th class="sorting">Instructions</th>
            <th class="sorting">Decision_Request_Input</th>
            <th class="sorting">Status</th>
            <th class="sorting">Evidence_Info</th>
            <th class="sorting">Evidence_Doc</th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody id="editContents">
        <tr id="1" class="mainheader " bgcolor="#000033">
            <td id="nonEdit" class="th1 p_no" bgcolor="#215F8B">
<font color="white" align="left"></font>

            </td>
            <td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
Header1</td>
        </tr>
        <tr id="2" class="header " bgcolor="#000033" style="opacity:0.8">
            <td id="nonEdit" class="th1" bgcolor="#215F8B">
<font color="white" align="left"></font>

            </td>
            <td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
SubHeader1</td>
        </tr>
        <tr class="values">
            <td class="sno">1</td>
            <td>1</td>
            <td>4</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>null</td>
            <td>Yes#No#NA</td>
        </tr>
        <tr class="values">
            <td class="sno">1</td>
            <td>1</td>
            <td>4</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>null</td>
            <td>Yes#No#NA</td>
        </tr>
        <tr class="values">
            <td class="sno">1</td>
    ...

CSS

table#t01 th {
    background-color: #007dc1;
    color: white;
    max-height: 60px;
}

JavaScript

var groupData = {};
var subGroupData = {};
var arr = [];  
     
$('#t01 tbody tr.mainheader').each(function(i) {   
  var groupIdData ={};
    groupIdData['id'] = $(this).attr('id');
    groupIdData['name'] = $(this).find('td:eq(2)').text().trim()
    groupIdData["action"]= 'Add/Edit/Delete'
    //arr.push(garr)
 
  groupData['group'] = groupIdData;
  groupData['subgrps'] = [];
  
    subGroupData = {};
		subGroupData["action"]= 'Add/Edit/Delete'
    subGroupData['id'] =$(this).next('.header').attr('id');
		subGroupData['name']= $(this).next('.header').find('td:eq(2)').text().trim();
    //arr.push(garr)
  
  groupData['subgrps'].push(subGroupData)
  subGroupData['items'] = [];
  
  var items = [];
  $(this).next('tr').each(function(){
    if($(this).hasClass('values'))
    {
      var rowData = {};
     $(this).find('td').each(function(i) {
      var thh = $(this).closest('table').find('th').eq($(this).index()).text();
      if(i == 0)
        rowData["Action"]='Add/Edit/Delete'
      if(i>1)
      rowData[thh]=$(this).text().trim()
     
    });
    //arr.push(garr)
    items.push(rowData)
    }
    else
      return
  });
  
    
    
      //console.log('over')   
  }
    subGroupData['items'].push(items);
    groupData['subgrps'].push(subGroupData);
    arr.push(groupData);
});
alert(JSON.stringify(arr))  ;