JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<input type="text" name="masknumber" maxlength="9">
<input type="text" name="number" maxlength="9">

JavaScript

$("input[name='masknumber']").on("input", function() {
  $("input[name='number']").val(destroyMask(this.value));
  this.value = createMask($("input[name='number']").val());
})
$("input[name='number']").on("input", function() {
  $("input[name='masknumber']").val(destroyMask(this.value));
  $("input[name='masknumber']").val(createMask($("input[name='number']").val()));
})
$(document).ready(function() {
  var firstpart = "";
})

function createMask(string) {
  console.log(string)
  var len = string.length;
  if (len == 1)
    firstpart = string;
  var stars = len > 1 ? len > 2 ? len > 3 ? len > 4 ? firstpart + 'XXXX' : firstpart + 'XXX' : firstpart + 'XX' : firstpart + 'X' : firstpart,
    result = stars + string.substring(5);
  return result;
}

function destroyMask(string) {
  console.log(string)
  //return string.replace(/\D/g,'').substring(0, 8);
  return string;
}