JSFiddle - React, Tailwind, and code Playground

HTML

Enter a number:<br>
<input type="text" id="myNum" value="12345" /><br><br>
toLocaleString:<br>
    <div id="msg1"></div>
    <div id="msg2"></div>
    <div id="msg3"></div>
<div>
    <input type="button" id="myButt" value="Test" />
</div>
<p>None of these produce the desired result: both a thousands separator and decimals. Or so I thought. The key was to specify the `minimumFractionDigits: 2`</p>

CSS

#myNum{width:90px;height:25px;color:blue;background:lavender;border:1px solid orange;;font-size:1.2em;}
div{width:100px;height:50px;float:left;padding:10px;text-align:center;margin-right:30px;}
#msg1{background:palegreen;}
#msg2{background:pink;}
#msg3{background:wheat;}
p{margin-top:150px;color:maroon;font-weight:bold;font-size:1.2em;}

JavaScript

$('#myNum').blur(function(){
    var tmp = $(this).val();

    var tmp1 = Number(tmp).toFixed(2).toLocaleString("en-US", {style:"currency"});
    $('#msg1').html(tmp1);

    var tmp2 = Number(tmp1).toLocaleString();
    $('#msg2').html(tmp2);

    var tmp3 = Number(tmp).toLocaleString("en-US", {style:"currency", currency:"USD", minimumFractionDigits: 2});
    $('#msg3').html(tmp3);
});

$('#myButt').click(function(){
    $('#myNum').blur();
});

$('#myNum').focus();