JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <input type='numeric' id='txt_currency' value='50000' />
  
  <br/><br/><br/>
  <hr/>
  <div id='display-box' style='color:red;'>
  </div>
  </div>
</body>

JavaScript

$(document).ready(function() {
  number_to_code(50000);

  $("#txt_currency").keyup(function() {
    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': 'A',
    '2': 'B',
    '3': 'C',
    '5': 'D',
    '6': 'E',
    '7': 'F',
    '8': 'G',
    '9': 'H'
  })[m]); /// m => chars[m]);


// grouping it with , 
  s = s.replace(/\B(?=(\w{3})+(?!\w))/g, ",");
  /* What I want to do is, replace the 2nd repeating character(s) with different letter. like Z
  So 50000 		=> DI,III.II => DI,IZZ.IZ
     2677.99  => B,EFF.HH  => B,EFZ.HZ
     366666.22=> CEE,EEE.BB=> CEZ,ZZZ.BZ
     
  */
  $("#display-box").text(s); 
 
}