JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?dummy=.js"></script>
<div id="calculator">
<div align='center'><h3>Vehicle Loan EMI Calculator Script</h3></div>
<table width="100%" border="0" cellpadding="0" cellspacing="4" ><tr><td colspan=2><table
width=100% height=100%>
<tr><td>
<form name=first><table align=center border=0 cellpadding=1 cellspacing=1 id=emi_calc style='font-size:12px;'>
<tr><td>Amount (Vehicle Price)
</td> <td> <input type=number id=lamt onkeyup=checnum(this); maxlength=9> </td> </tr>
<tr><td>Down Payment
</td> <td> <input type=text id=dpay onkeyup=checnum(this); maxlength=9> </td> </tr>
<tr><td>Annual Interest Rate
</td> <td> <input type=text id=inte onkeyup=checnum(this); maxlength=9> % </td> </tr>
<tr><td>Term/Period </td> <td> <input type=text id=term onkeyup=checnum(this); maxlength=9> months </td> </tr>
<tr><td colspan=2>
</td></tr>
<tr><td colspan=2 align=center><input type=button value='Calculate' onclick=loanemi_calc();>
<input type=button value='Reset' onclick="reset();"></td></tr>
<tr><td colspan=2 style="font-size:11px;" align="center" colspan='2' id='dumdiv'><a href="https://www.hscripts.com" style="color: #3D366F; font-size:11px; text-decoration:none;" id=dum></a></td></tr>
<tr><td>Monthly Payment </td> <td> <input type=text id=emi readonly> </td> </tr>
<tr><td>Total Interest Payment
</td> <td> <input type=text id=tip readonly> </td> </tr>
<tr><td>Total Amount to Pay
</td> <td> <input type=text id=tamt readonly> </td> </tr></table>
</form></table>
</div>
 <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.load('visualization', '1.1', {
    'packages': ['corechart']
});

function drawChart() {
 
  //alert(principal);
 

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'year');
  data.addColumn('number', 'principal');
  data.addColumn('number', 'balance');
  data.addColumn('number', 'interest');
  var d = new Date();
  var n = d.getFullYear();
  for(var i = n; i <= n+4; i++){
    data.addRows([
    ['i',i,i,i]
    ]);
}
  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  chart.draw(data, options);

}


function checnum(as){
var a = as.value;
for(var x=0; x<a.length; x++)
{
var ff = a[x];
if(isNaN(a))
{
a = a.substring(0,(a.length-1));
as.value = a;
}}
}
function loanemi_calc()
{
 var j = document.getElementById("lamt").value;
   //alert(principal);
 

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'year');
  data.addColumn('number', 'principal');
  data.addColumn('number', 'balance');
  data.addColumn('number', 'interest');
  var d = new Date();
  var n = d.getFullYear();
  for(var i = n; i <= n+4; i++){
    data.addRows([
    [i,j,i,i]
    ]);
}
  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  chart.draw(data, options);
var sds = document.getElementById("dum");
if(sds == null){
alert("You are using a free package.\n You are not allowed to remove the copyright.\n");
}
var sdss = document.getElementById("dumdiv");
if(sdss == null){
alert("You are using a free package.\n You are not allowed to remove the copyright.\n");
}
if(sdss != null)
{var lamt = document.getElementById("lamt").value;var dpay = document.getElementById("dpay").value;var inte = document.getElementById("inte").value;var...