JSFiddle - React, Tailwind, and code Playground

HTML

<form id="loandata" name="loandata">
    <div>Loan Amount:<input type="text" name="principal" size="12" onchange="calculate();">($)</div>
    <div>Loan Term:
    <input type="text" name="years" size="12" onchange="calculate();" style="margin-left: 13px;"> Years
    </div>
    <div style="margin-bottom: 10px;">Interest Rate:
    <input type="text" name="interest" size="12" onchange="calculate();" style="margin-left: 4px;"> %</div>
    <input id="button" type="button" value="Calculate Payment" onclick="calculate();" style="width: 217px;">
    <div class="payment-info"><b>Payment Information:</b></div>
    <div class="results">
    <div>
    <div id="results-text">Your monthly payment will be:<div id="payment"></div></div>
    </div>
    <div>
    <div class="results-text">Your total payment will be:<div id="total"></div></div>
    </div>
     <div>
    <div class="results-text">Your total interest payments will be:<div id="totalinterest"></div></div>

    </div>
    </div>
    
    <div id="visualization" style="width: 750px; height: 500px;"></div>

    <div id="something"></div>
</form>

<table>
<tr><th><span>Month</span></th><th><span>Payment</span></th><th><span>Interest</span></th><th><span>Total</span></th></tr>
<tr id="tdcontainer"></tr>
</table>

JavaScript

function calculate() {
    var principal = document.loandata.principal.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;

    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);

    if (!isNaN(monthly) && 
        (monthly != Number.POSITIVE_INFINITY) &&
        (monthly != Number.NEGATIVE_INFINITY)) {

    document.getElementById('payment').innerHTML = '$'+round(monthly);
    document.getElementById('total').innerHTML = '$'+round(monthly * payments);
    document.getElementById('totalinterest').innerHTML = '$'+round((monthly * payments) - principal);    
    var paymentin = round(monthly);
    var totalin = round(monthly * payments);
    var totalinterestin = round((monthly * payments) - principal);
    var payment_numbers = 30;
    var total_numbers = 10;
    var totalinterest_numbers = 20;
    payment_numbers = paymentin
    total_numbers = totalin;
    totalinterest = totalinterestin;
    googlechart();
    totalF();
    
    } else {
        document.loandata.payment.value = "";
        document.loandata.total.value = "";
        document.loandata.totalinterest.value = "";
    }

    function googlechart(){
        var gchart = 'https://chart.googleapis.com/chart?';
        var pie1 = '&chd=t:'+parseInt(total_numbers)+','+ parseInt(totalinterest_numbers)+','+ parseInt(payment_numbers);
        var pie3 = '&cht=p3&chl=Total|Interest|Payments';
        document.getElementById('visualization').innerHTML = '<img src="https://chart.googleapis.com/chart?chs=250x100&chco=6a9f35,0584af,a4b12d&'+pie1+''+pie3+'" />';
    }
    
    function totalF(){
    var body = document.body;
    var tbl = document.createElement('table');    
    var tblBody = document.createElement('tbody');
    var tndiv = document.getElementById('tdcontainer');
    
    for (var j = 0; j < payments; j++){
        var row = document.createElement('tr');
    
       ...