JSFiddle - React, Tailwind, and code Playground

HTML

<table class="gvv1" cellspacing="0" rules="all" border="1" id="MainContent_gvActivities"
style="border-collapse: collapse;">
<tr style="background-color: buttonface;">
    <th scope="col">
        &nbsp;
    </th>
    <th scope="col">
        Cluster
    </th>
    <th scope="col">
        Activity
    </th>
    <th scope="col">
        Data
    </th>
    <th scope="col">
        <b>London_Tasks</b>
    </th>
    <th scope="col">
        <b>London_Achieved</b>
    </th>
    <th scope="col">
        <b>Geneva_Tasks</b>
    </th>
    <th scope="col">
        <b>Geneva_Achieved</b>
    </th>
</tr>
<tr>
    <td>
        <input id="chkSelected_0" type="checkbox" />
    </td>
    <td style="width: 50px; white-space: nowrap;">
        ER.
    </td>
    <td style="width: 50px; white-space: nowrap;">
        Provision
    </td>
    <td style="width: 60px; white-space: nowrap;">
        number
    </td>
    <td>
        <input name="ctl00Activitiesl00" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl00Activitiesl01" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl00Activitiesl02" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl00Activitiesl03" type="text" value="-1.00" />
    </td>
</tr>
<tr>
    <td>
        <input id="chkSelected_1" type="checkbox" />
    </td>
    <td style="width: 50px; white-space: nowrap;">
        ER.
    </td>
    <td style="width: 50px; white-space: nowrap;">
        support
    </td>
    <td style="width: 60px; white-space: nowrap;">
        campaign (Numbers)
    </td>
    <td>
        <input name="ctl0Activities200" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl0Activities201" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl0Activities202" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl0Activities203" type="text" value="-1.00" />
    </td>
</tr>      
</table>

JavaScript

(function($) {    
    		$.fn.replaceTagName = function(replaceWith) {
    				var tags = [],
    						i    = this.length;
    				while (i--) {
    						var newElement = document.createElement(replaceWith),
    								thisi      = this[i],
    								thisia     = thisi.attributes;
    						for (var a = thisia.length - 1; a >= 0; a--) {
    								var attrib = thisia[a];
    								newElement.setAttribute(attrib.name, attrib.value);
    						};
    						newElement.innerHTML = thisi.innerHTML;
    						$(thisi).after(newElement).remove();
    						tags[i - 1] = newElement;
    				}
    				return $(tags);
    		};
    })(window.jQuery);
    
    $(function() {
    		$('.gvv1').each(function(i, v) {
    			city1 = $(this).find('th:eq(4)').text().split('_');
    			city1 = city1[0];
    			var city2 = $(this).find('th:eq(6)').text().split('_');
    			city2 = city2[0];
    			$(this).find('th:eq(4)').text('Tasks');
    			$(this).find('th:eq(5)').text('Achieved');
    			$(this).find('th:eq(6)').text('Tasks');
    			$(this).find('th:eq(7)').text('Achieved');
    		
    			$(this).find('th').replaceTagName('td');
    	
    			$(this).prepend('<thead><tr><th colspan="4">&nbsp;</th><th colspan="2">' + city1 + '</th><th colspan="2">' + city2 + '</th></tr></thead>');
    		
    		});
    });