JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<script src="https://editor.datatables.net/release/DataTables/extras/Editor/examples/support/bootstrap/dataTables/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Content -->
	<div class="row">
	<div class="col-md-12">
		<div class="col-md-12">
		
		<h3>Equipment</h3>
		<hr />

		<table class="table table-bordered table-hover" id="equipmentTable">
			<thead>
				<tr>
					<th rowspan="2" class="text-center">#</th>
					<th rowspan="2" class="text-center">DESCRIPTION</th>
					<th rowspan="2" class="text-center">MODEL</th>
					<th rowspan="2" class="text-center">Groupings</th>
					<th rowspan="2" class="text-center">FLYWHEEL / HORSEPOWER</th>
					<th colspan="3" class="text-center">BARE RENTAL</th>
					<th colspan="3" class="text-center">REPAIR AND MAINTENANCE</th>
					<th colspan="3" class="text-center">FUEL</th>
					<th colspan="3" class="text-center">LUBRICANT</th>
					<th rowspan="2" class="text-center">LABOR RATE</th>
					<th rowspan="2" class="text-center">OPERATING COST/MONTHLY</th>
					<th rowspan="2" class="text-center">OPERATING COST/DAILY</th>
					<th rowspan="2" class="text-center">OPERATING COST/HOUR</th>
					<th colspan="3" class="text-center">CAPABILITY RATE</th>
					<th rowspan="2" class="text-center">REMARKS</th>
					<th rowspan="2">&nbsp;</th>
				</tr>
				<tr>
					<th>M</th>
					<th>D</th>
					<th>H</th>
					<th>Cost</th>
					<th>Index</th>
					<th>Total</th>
					<th>Base</th>
					<th>Liter</th>
					<th>Total</th>
					<th>Base</th>
					<th>Liter</th>
					<th>Total</th>
					<th>Output</th>
					<th>Unit</th>
					<th>Period</th>
				</tr>
			</thead>
			<tbody>
				<!-- Default Values should loop here -->
				<tr>
					<td class="count">1</td>
					<td><a href="#"...

JavaScript

$( function () {
	
	/* Data Table Initialization */
	var equipmentDataTable = $('#equipmentTable').dataTable({
									"aoColumnDefs": [{ "sClass": "text-center", "aTargets": [ 0,25 ] },
										             { 'bSortable': false, 'aTargets': [ 25 ] }],
								    "sScrollX": '100%'
	                 	 	 });
	
	/* Add row functionality of the table */
	$('#addEquipment').click( function() {
		
		equipmentDataTable.fnAddData( [ '1',
    				                '<a href="#" class="equipmentDesc" data-type="text">N/A</a>',
    				                '<a href="#" class="equipmentModel" data-type="text">N/A</a>',
    				                '<a href="#" class="equipmentLaborSubGroup" data-type="select">Others</a>',
    				                '<a href="#" class="equipmentHorsepower" data-type="text">N/A</a>',
    				                '<a href="#" class="equipmentMonthlyPrice" data-type="text">0</a>',
    				                '0',
    				                '0',
    				                '<a href="#" class="equipmentMaintenanceBase" data-type="text">0</a>',
    				                '<a href="#" class="equipmentMaintenanceIndex" data-type="text">0.12</a>',
    				                '0',
    				                '<a href="#" class="equipmentFuelBase" data-type="text">0</a>',
    				                '<a href="#" class="equipmentFuel" data-type="text">1.0</a>',
    				                '0',
    				                '<a href="#" class="equipmentLubricantBase" data-type="text">0</a>',
    				                '<a href="#" class="equipmentLubricant" data-type="text">1.0</a>',
    				                '0',
    				                '<a href="#" class="equipmentLaborRate" data-type="select">0</a>',
    				                '0',
    				                '0',
    				                '0',
    				                '<a href="#" class="equipmentCapabilityOutput" data-type="text">0</a>',
    				                '<a href="#" class="equipmentCapabilityUnit" data-type="text">N/A</a>',
    				                '<a...