JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input" onkeyup="onKeyup()" />

JavaScript

const onKeyup = (e) => {
	const input = document.getElementById('input');
  const value = input.value;
  
  let _value = value;
  if (_value.length === 1) {
    _value = `+1 (${value}`;
  } else {
    _value.replace(
      /(\d{1,2})(\d{1})?(\d{1,2})?(\d{1,4})?/,
      function(_, p1, p2, p3, p4) {
        let output = ""
        if (p1) output = `${p1}`;
        if (p2) output += `${p2}`;
        if (p3) output += ` ${p3}-`
        if (p4) output += ` ${p4}`
        _value = output;
      }
    );
  }
  input.value = _value
}