JSFiddle - React, Tailwind, and code Playground

HTML

PELL Grant Amount: <input type="text" id="earnedAid1">
    <br /> 
    <div id="earnedAid1"></div>
        <br /> 
	Subsidized Amount: <input type="text" id="earnedAid2">
    <br /> 
    <div id="earnedAid2"></div>
        <br /> 
	Unsubsidized Amount: <input type="text" id="earnedAid3">
    <br /> 
    <div id="earnedAid3"></div>
        <br /> 
        	<br />        
            	
    <div id="total" style="color: red; text-align: right;"></div>

JavaScript

$(function() {
    var output_element = $('#earnedAid1');
    var output_element1 = $('#earnedAid2');
    var output_element2 = $('#earnedAid3');

    $('#earnedAid1').keyup(function() {  
        updateTotal();
    });
    
    $('#earnedAid2').keyup(function() {  
        updateTotal();
    });
    
     $('#earnedAid3').keyup(function() {  
        updateTotal();
    });
    
    var updateTotal = function () {
      var input1 = parseInt($('#earnedAid1').val() || 0);
      var input2 = parseInt($('#earnedAid2').val() || 0);
      var input3 = parseInt($('#earnedAid3').val() || 0);        
      $('#total').text("$" + input1 + input2 + input3 +" in Retained Aid");
    };

 });