JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<br/>
<div class="col-lg-10 MOnthly">
                <div class="input-box">
                    <input value=""  name="Monthly" id="Monthly" class="form-control"  />
                    <span class="unit">$</span>
                </div>
              
            </div>

CSS

.input-box {
    position: relative;
}


.unit {
    position: absolute;
    display: block;
    left: 5px;
    top: 8px;
    z-index: 9;
}

JavaScript

//Here is main function to format string

Number.prototype.formatMoney = function (c, d, t) {
            var n = this,
                c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d == undefined ? "." : d,
                t = t == undefined ? "," : t,
                s = n < 0 ? "-" : "",
                i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
                j = (j = i.length) > 3 ? j % 3 : 0;
            return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
        };



//This is jQuery part
 $(document).on('blur', "#Monthly", function () {

                        var Money = $(this).val();
                        Money = parseInt(Money,10).formatMoney(2);
                        $(this).val(Money);
 });