JSFiddle - React, Tailwind, and code Playground

by Abhilash1994

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<p>
            <label for="food">Food</label>
            <input type="number" id="food" />
        </p>

        <p>
            <label for="auto">Auto</label>
            <input type="number" id="auto" />
        </p>

        <p>
            <label for="bills">Bills</label>
            <input type="number" id="bills" />
        </p>

        <p>
            <label id="monthlybudget">Monthly Budget</label>
            /* Add food + auto + bills whenever there is input */
        </p>

JavaScript

$(document).change(function(e){
var food=document.getElementById("food").value;
var auto=document.getElementById("auto").value;
var bills=document.getElementById("bills").value;
var total=Number(food)+Number(auto)+Number(bills);
document.getElementById("monthlybudget").innerHTML=total;
});