JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
</head>
<body>
<label for="">Equipment cost</label> <br>
<input type="text" id="total-val">
<br><br>
<label for="">Tax</label> <br>
<select name="" id="tax">
<option value="10">10%</option>
<option value="12">12%</option>
<option value="21">21%</option>
<option value="22">22%</option>
<option value="24">24%</option>
</select>
<br><br>
<label for="">Period</label> <br>
<select name="" id="period">
<option value="24">24 Months</option>
<option value="36">36 Months</option>
<option value="48">48 Months</option>
<option value="60">60 Months</option>
</select>
<br><br>
<label for="">Monthly Payments</label> <br>
<input type="text" readonly id="monthly_payment">
<br><br>
<label for="">Savings</label> <br>
<input type="" readonly name="" id="savings">
<br><br>
<label for="">Actual</label> <br>
<input type="" readonly name="" id="actual">
<br><br>
<button id="submit">Submit</button>
<br><br>
<div id="container" style="width:100%; height:400px;"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
var total;
var total1;
var chart;
var tax;
var period;
var amort;
var monthly;
var amort_data = [];
var lease_data = [];
var wow_saving =...