JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form_head">Flight & Duty</div>

<table cellpadding="4" cellspacing="0" width="100%">

<thead>
<tr class="tab_head" style="color:#000; text-align:center"><th rowspan="2">Pilot</th><th rowspan="2">ARN</th><th colspan="2">Remaining Duty Time</th><th colspan="3">Remaining Flight Time</th></tr>
<tr class="tab_head" style="color:#000; text-align:center"><th>7 Day</th><th>14 Day</th><th>7 Day</th><th>30 Day</th><th>365 Day</th></tr>
</thead>

<tbody>
<tr><td id="name"></td><td id="arn"></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>

</table>

JavaScript

$(document).ready(function() {
	
var data = function(callback) {
	return $.ajax({
		type: "GET",
		dataType: 'json',
		url: "required/duty.php",
		async: false,
		success: function(doc) {
			var duty = [];
			$(doc).each(function() {
				duty.push({
					id: $(this).attr('id'),
					dutyarn: $(this).attr('dutyarn'),
					dutyon: $(this).attr('dutyon'),
					dutyoff: $(this).attr('dutyoff'),
					dutytime: $(this).attr('dutytime'),
					userfname: $(this).attr('userfname'),
					userlname: $(this).attr('userlname'),
					});
				});
				callback(duty);
			}
		}).responseText;
	};
	
	document.getElementById("arn").innerHTML = duty.arn;	
});