JSFiddle - React, Tailwind, and code Playground

by Eric Abutaliev

HTML

<div id="creditCalcByBusian"></div>

CSS

#creditCalcByBusian .table_gr td{
    padding: 5px 20px 5px 5px;
    width: 150px;
    border: 1px solid black;
    margin: 0;
    text-align: right;
}
#creditCalcByBusian .table_gr{
    background: #f2f2f2;
}
#creditCalcByBusian tr:nth-child(1){
    font-weight: bold;
}
#creditCalcByBusian tr:nth-child(2n){
    background: grey;
}
#creditCalcByBusian .tableFirst{
    width: 150px;
    padding: 0 5px;
}

JavaScript

(function creditCalcByBusian(){
    var area=$("#creditCalcByBusian");
    var elementIndexCounter=0;
    area.createInput = function(label, typeOfInput,  style, inputVal){
        elementIndexCounter++;
        label ? true : label="";
        typeOfInput ? true : typeOfInput="";
        style ? true : style="";
        
        var labelHtmlToAppend="<table><tr><td class='tableFirst'><label for='creditCalcByBusian_input"+elementIndexCounter+"'>"+label+": <label></td>";
        var inputHtmlToAppend="<td><input type='text' id='creditCalcByBusian_input"+elementIndexCounter+"'  /></td></tr></table>";
        area.append(labelHtmlToAppend+inputHtmlToAppend);
        
        var element=area.find("input:last");
        element.addClass(style);
        
        if (typeOfInput=="proc"){
            element.val(inputVal+"%");
        } else{
            element.val(number_format(inputVal, 0, ',', ' '));    
        }
        
        if (typeOfInput=="num"){
            element.keyup(function(){
                this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '');
                this.value=number_format(this.value, 0, ',', ' ');
            });
        }

        if (typeOfInput=="proc"){
            element.focus(function(){
                this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '');
            });
            element.blur(function(){
                this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')+"%";
            });
            element.keyup(function(){
                this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')+"%";
                setCaretToPos(this, this.value.length-1);
            });
        }
        
        return element;
    }
    area.createButton = function(text){
        var htmlToAppend="<button>"+text+"</button>";
        area.append(htmlToAppend);
        var element=area.find("button:last");
        return element;
    }
    
    var summ=area.createInput("Сумма кредита",...