JSFiddle - React, Tailwind, and code Playground

HTML

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th style="background-color:#FFCC00">ID</th>
					<th style="background-color:#FFCC00">Creator</th>
					<th style="background-color:#FFCC00">Priority</th>
					<th style="background-color:#FFCC00">Month</th>
					<th style="background-color:#FFCC00">PIC_ID</th>
					<th style="background-color:#FFCC00">Customer</th>
					<th style="background-color:#FFCC00">Customer Remark</th>
				</tr>
			</thead> 
			<tbody id='tbodyid'>
      <tr>
          <td>1</td>
          <td>User1</td>
          <td>1</td>
          <td>APR</td>
           <td>P1</td>
          <td>ABC</td>
          <td>Test</td>
      </tr>
			</tbody>
		</table>

JavaScript

$(document).ready(function() {  
		getCustomerDetails();
	});
  
  function getCustomerDetails()
	{
		
        $.ajax({  
			url: oDataUrl, 
			type: "GET",  
			headers: {  
				"Accept": "application/json;odata=verbose"  
			},
			async:true,
			success: function(data, textStatus, xhr) {  
			console.log(data.d.results);
			
			var tbody = document.getElementById("tbodyid");
			
			var row = tbody.insertRow();
				var cell = row.insertCell();
				cell.innerHTML = "";
				cell = row.insertCell();
				cell.innerHTML = "<button id='btnAddNew' onclick='AddNewRow();' style='background-color:#444;color:white;text-decoration:none;margin-top:-2px;width: 80px'>Add Record</button>";
				cell = row.insertCell();
				cell.innerHTML = "<input id='txtPriority'></input>";
				cell = row.insertCell();
				cell.innerHTML = "<input id='txtMonth'></input>";
				cell = row.insertCell();
				cell.innerHTML = "<input id='txtPicID'></input>";
				cell = row.insertCell();
				cell.innerHTML = "<input id='txtCustomer'></input>";
				cell = row.insertCell();
				cell.innerHTML = "<input id='txtCustomerRemarks'></input>";
				cell = row.insertCell();
				cell.innerHTML = "<input id='txtPic'></input>";
				cell = row.insertCell();
				cell.innerHTML = "<input id='txtReceived'></input>";
				
			for(var i=0;i<data.d.results.length;i++){
				
				var creator=data.d.results[i].Author.Title;
				var receivedDate = data.d.results[i]["Received"].split('T')[0];
				var vNewReceivedDate = receivedDate.split('-');
				var row = tbody.insertRow();
				var cell = row.insertCell();
				cell.innerHTML = data.d.results[i]["ID"];
				cell = row.insertCell();
				cell.innerHTML = creator.split('(')[0];//data.d.results[i].Author.Title;//data.d.results[i]["AuthorId"];
				cell = row.insertCell();
				cell.innerHTML = data.d.results[i]["Priority"];
				cell = row.insertCell();
				cell.innerHTML = data.d.results[i]["Mth"];
				cell = row.insertCell();
				cell.innerHTML =...