JSFiddle - React, Tailwind, and code Playground

by KEMPZOR

HTML

<div class="rassrochka-main">
   <div class="rassrochka-main-bar">РАСЧЁТ РАССРОЧКИ</div>
     <div class="rassrochka-main-okno">
<div><input type="hidden" id="curs-usd" value=""/></div>
<div><input type="text" id="firstsumrassrochka" name="summaallpay" value="" placeholder="Сумма рассрочки"/></div>
<span id="theOutputText"></span>
		<div><p class="chislorange"></p></div>
<p>Количество месяцев:</p>              
			<select class="month-rass-select" name="month">
        <option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
        <option value="6">6</option>
			</select></div>

		<div class="sendbutton"><a class="knopka-raschet-rassrochka">РАССЧИТАТЬ</a></div>
		<div class="table-rass"><table class="table-style-two" border="0" style="width:100%;">
        <thead>
        <tr>
        <th style="color: #fff;">Месяц</th>
        <th style="color: #fff;">Сумма (BYN)</th>
        </tr>
        </thead>
       <tbody>
       </tbody>
</table>
</div>
</div>

CSS

div.sendbutton {
    text-align: center;
    background: #ebebeb;
    padding: 10px;
}

.rassrochka-main {
border: 5px solid #252525;
}

.rassrochka-main-bar {
    background: #c62d1f;
    padding: 20px;
    border-bottom: 1px solid #060000;
    font-size: 1.4em;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Open Sans';
}
.rassrochka-main-okno {
    padding: 20px;
    background: #ebebeb;
    text-align: center;
    font-family: 'Open Sans';
}
.rassmonth {
	border:1px solid red;
        text-align:center;
        font-weight:600;
	margin:0;
}
.rasssumm{
	border:1px solid black;
        text-align:center;
        font-weight:600;
	margin:0;
}
.min_rassrochka{
	color:red;
}

.month-rass-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 45px;
    padding: 10px 38px 10px 16px;
    background: #fff url("http://l-c.by/d/402010/d/select-arrows.svg") no-repeat right 16px center;
    background-size: 10px;
    transition: border-color .1s ease-in-out,box-shadow .1s ease-in-out;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor:pointer;
}
.month-rass-select:hover {
    border: 1px solid #999;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
}
.month-rass-select:focus {
    outline: none;
}



table.table-style-two {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
}
 
table.table-style-two th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #252525;
        background-color: #db1e1e;
}
 
table.table-style-two tr:hover td {    
        background-color: #444;
        color: #fff;
}
 
table.table-style-two td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #252525;
        background-color:...

JavaScript

$(document).ready(function() { // Ждём загрузки страницы	


	var uri = 'http://www.nbrb.by/API/';
    $.getJSON(uri + 'ExRates/Rates/145')
	.done(function (data) {
	  console.log(data.Cur_OfficialRate);
	  $('input#curs-usd').val(data.Cur_OfficialRate);
	  $('.min_rassrochka').text(data.Cur_OfficialRate * 35);
	}).error(function (err) {
	  console.log('ошибка');
	});

	$(".knopka-raschet-rassrochka").click( function () { // Событие нажатия на кнопку "Расчёт" 
	$("div.table-rass > table.table-style-two > tbody > tr").remove();  
	var curs_rass = $('input#curs-usd').val() * 35;  
    var datamonth = $("select[name=month]").val(); // Количество месяцев рассрочки
        var allsumma = $("input[name=summaallpay]").val(); // Вся сумма
        var result = allsumma; // Переменная результата
        var j = 35;
        var js = result;
		for (var i=1; i <= datamonth; i++) {
			js = js - j;
			rezultsumma = (j);
			rezultmesac = (i);
			if (js<=35 && js>=25) {j=25;}
            if (js<=20 && js>=15) {j=15;}
            if (js<=10 && js>=5) {j=5;}
            if (js<=0 && js>=0) {j=0;}
			$('<tr><td class="rassmonth">'+rezultmesac+'</td>'+'<td class="rasssumm">'+rezultsumma+'</td></tr>').fadeIn('slow').appendTo('div.table-rass > table.table-style-two > tbody');
			console.log($('<tr><td class="rassmonth">'+rezultmesac+'</td>'+'<td class="rasssumm">'+rezultsumma+'</td></tr>').html());
		}
	});
});