JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="number" pattern="[0-9]*">
<br>
<input type="number" id="display">

JavaScript

document.getElementById("number").onblur =function (){    
    this.value = parseFloat(this.value.replace(/,/g, ""))
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    
    document.getElementById("display").value = this.value.replace(/,/g, "")
    
}