JSFiddle - React, Tailwind, and code Playground

by Otto Kupradze

HTML

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

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

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

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

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

JavaScript

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) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("POST",url,false);
        xmlhttp.onload = function() {
            if (xmlhttp.status === 200) {
                // alert('Request\'s done is ' + xmlhttp.status);
                // console.log(xmlhttp.responseText);

                // Data
                var obj = JSON.parse(xmlhttp.responseText);
                console.log(obj);

                document.getElementById("carvalue").innerHTML = obj.carvalue;
                document.getElementById("base_premium").innerHTML = obj.base_premium;
                document.getElementById("commission").innerHTML = obj.commission;
                document.getElementById("tax_rate").innerHTML = obj.tax_rate;
                document.getElementById("inst_count").innerHTML = obj.inst_count;

                // calc_base
                document.getElementById("calc_base").innerHTML = obj.calc_base;
                var calc_base_inst = Object.keys(obj.calc_base_inst).map(function(key) {
                    return [Number(key), obj.calc_base_inst[key]];
                });
                document.getElementById("calc_base_inst").innerHTML = calc_base_inst;

                // calc_comision
               ...