JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input1" type="text">

JavaScript

var count1=0;
var strPrev1 = '';
$(document).ready(function()
{
  $('#input1').keypress(function(e)
  {

//    Filter input text to accept only numbers , arrow movement, backspace, delete

    if ((e.keyCode == 8) ||  (e.keyCode == 46) || (e.keyCode >= 35 && e.keyCode <= 40) || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
    {
      if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
      {
        
//        bila count1 % 2 = 0, add divider '-'
        if (count1 > 0 && count1 % 2 == 0) 
        { 
          $("#input1").val($("#input1").val()+'-');
        }
          count1++;
        
      } 
      if ((e.keyCode == 8) ||  (e.keyCode == 46))
      {
//      no idea what to do to keep the mask format 99-99-99-99-[repeat format until last inputed number] is it "count1--;" ?
      }
      strPrev1 = $("#input1").val();
    }
    else 
    {
//      replace input text value with previous accepted
      $("#input1").val(strPrev1);
    }
  });
});