JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <input type='numeric' id='t' value='0' />
  
  <br/><br/><br/>
  <div id='x' style='text'>
  </div>
  </div>
</body>

CSS

#t{text-align:right}

JavaScript

$(document).ready(function () {

$("#t").keyup(function() {
 $("#x").text( number_to_code($(this).val()));
});
});



function number_to_code(s) {

  // converting the value to something like 50000.00 to look like currency
  // next replace it with the codes as bellow.

  s = parseFloat(s).toFixed(2).replace(/\d/g, m => ({
    '0': 'I',
    '1': 'N',
    '2': 'E',
    '3': 'S',
    '4': 'T',
    '5': 'O',
    '6': 'M',
    '7': 'A',
    '8': 'L',
    '9': 'D'
  })[m]);

  // grouping it with , 
  s = s
    .replace(/([A-Z])(\1+)/g, (_, g1, g2) => {
      return g1 + g2.replace(/./g, "Z")
    })
    .replace(/\B(?=(\w{3})+(?!\w))/g, ",")

  return s;
}