JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table" border="1">
    <thead class="thead-dark">
        <tr>
            <th></th>
            <th>Policy</th>
            <th id="inst_count"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value</td>
            <td align="right"><span id="carvalue"></span></td>
            <td id="empty_td"></td>
        </tr>

        <tr>
            <td>Base premium (<span id="base_premium"></span> %)</td>
            <td align="right"><span id="calc_base"></span></td>
            <td id="calc_base_inst"></td>
        </tr>

        <tr>
            <td>Comision (<span id="commission"></span> %)</td>
            <td align="right"><span id="calc_comision"></span></td>
            <td id="calc_comision_inst"></td>
        </tr>

        <tr>
            <td>Tax (<span id="tax_rate"></span> %)</td>
            <td align="right"><span id="calc_tax"></span></td>
            <td id="calc_tax_inst"></td>
        </tr>

        <tr>
            <td><b>Total cost</b></td>
            <td align="right"><span style="font-weight: 700" id="calc_total"></span></td>
            <td id="calc_total_inst"></td>
        </tr>
    </tbody>
</table>

<button type="button" onclick="javascript:ajaxCalc(this)">Calculate</button>

CSS

html {
	font: 1em / 1.25
		"Helvetica Neue", "Segoe UI",
		Roboto, Ubuntu, sans-serif;
}

table {
	border: none;
	border-collapse: collapse;
}

th, td {
	border: solid #eee;
	border-width: 0 1px 1px 0;
	padding: .25em;
}

thead {
	font-weight: bold;
}

tr > :nth-child(3) {
	display: none;
}

tbody > tr > td:nth-child(n + 2) {
	text-align: right;
}

JavaScript

window.ajaxCalc = function ajaxCalc() {
//	var form = document.getElementById('calcForm');
//	var elem = form.elements;
//	var url = form.action;
//	var params = "";
//	var value;
//
//	for (var i = 0; i < elem.length; i++) {
//		if (elem[i].tagName == "SELECT") {
//			value = elem[i].options[elem[i].selectedIndex].value;
//		} else {
//			value = elem[i].value;
//		}
//		params += elem[i].name + "=" + encodeURIComponent(value) + "&";
//	}
//
//	if (window.XMLHttpRequest) {
//		// WHATWG standart
//		xmlhttp = new XMLHttpRequest();
//	} else {
//		// ancient Microsoft 'standart'
//		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//	}
//
//	xmlhttp.open("POST", url, false);
//	xmlhttp.onload = function () {
//		if (xmlhttp.status === 200) {
			var xmlhttp = { responseText: '{"carvalue":"10000.00","base_premium":"11.00","commission":"17.00","tax_rate":"13","inst_count":"5","calc_base":"1100.00","calc_base_inst":{"1":"220.00","2":"220.00","3":"220.00","4":"220.00","5":"220.00"},"calc_comision":"187.00","calc_comision_inst":{"1":"37.40","2":"37.40","3":"37.40","4":"37.40","5":"37.40"},"calc_tax":"143.00","calc_tax_inst":{"1":"28.60","2":"28.60","3":"28.60","4":"28.60","5":"28.60"},"calc_total":"1430.00","calc_total_inst":{"1":"286.00","2":"286.00","3":"286.00","4":"286.00","5":"286.00"}}' };
			var obj = JSON.parse(xmlhttp.responseText);
			console.log(obj);

			Array.from(document.querySelectorAll("tr > :nth-child(n + 4)"))
				.forEach(function (element) {
					element.remove();
				});

			Object.entries(obj).forEach(function (obj) {
				var id = obj[0], data = obj[1];
				
				if (typeof data === "object") {
					Object.values(data).forEach(function (value) {
						var cell = document.getElementById(id).parentNode.insertCell();
						cell.textContent = value;
					});
				} else {
					document.getElementById(id).textContent = data;
				}
			});

			for (var i = 0, len = 5, cell; i < len; i++) {
				cell =...