JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$('#ssn').on("keyup change paste mouseup", function(evt){
      	setTimeout(function(){
        
          var $ssn = $('#ssn');
        	var $length = $ssn.val().length;
        	var $value = $ssn.val();
				
          $ssn.val(formatSSN($value));	
        }, 10);

      });
      
// Start of section that prevents arrow keys       
$('#ssn').on("click focus", function(evt){
	var value = $(this).val();
  $(this).val('').val(value);
});

$('#ssn').on("keydown", function(evt){

				var key = evt.keyCode;
          if(key >= 37 && key <= 40){

          	$(this).focus();
          	var value = $(this).val();
          	$(this).val(' ').val(value);
            evt.stopPropagation();
            return false;
         }
});

// End of section that prevents arrow keys
      
function formatSSN(inputSSN){
	var dashPositions = [3, 6];
  var inputLength = inputSSN.length;
  var output = inputSSN;
  for(i in dashPositions){
  
  
  	if(dashPositions[i] < inputLength){
    	if(output[dashPositions[i]] !== '-'){
      	var firstPart = output.substring(0, dashPositions[i]) + '-';
        var secondPart = output.substring(dashPositions[i]);
        output = firstPart + secondPart;
      }
    }
  	
  }
  if(output.length > 11){
   	output = output.substring(0,11);
   }
  return output;
}