JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<div class="container">
    <div class="control-group">
        <label class="control-label">Loan Amount 1</label>
        <div class="controls">
            <div class="input-append">
                <input class="span2 loan-input" name="loanAmount1" type="text"> <span class="add-on" name="loanAmount1Cur">$ </span>

            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Loan Amount 2</label>
        <div class="controls">
            <div class="input-append">
                <input class="span2 loan-input" name="loanAmount2" type="text"><span class="add-on" name="LoanAmount2Cur">$ </span>

            </div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    $(".loan-input").on("keyup", null, function () {
        var $input = $(this),
            value = $input.val(),
            num = parseFloat(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
        
        $input.val(num);
    });
});