JSFiddle - React, Tailwind, and code Playground

HTML

Enter your phone number:
<span class="phone">(<input type="text" class="phone phone3" id="phone_area" name="phone_area" maxlength="3" onkeyup="advance_phone(event, 'phone_prefix')" />)<input type="text" class="phone phone3" id="phone_prefix" name="phone_prefix" maxlength="3" onkeyup="advance_phone(event, 'phone_suffix')" />-<input type="text" class="phone phone4" id="phone_suffix" name="phone_suffix" maxlength="4" /></span>

CSS

input.phone { border: none; }
input.phone3 { width: 23px; }
input.phone4 { width: 30px; }

span.phone {
  padding: 3px;
  border: 1px solid black;
}

JavaScript

function advance_phone(event, next_element)
{
   var evt = event ? event : window.event; // Older versions of IE don't pass along an event object
   var target = evt.target || evt.srcElement; // Get the target of the event
   
   if (target.value.length == target.maxLength)
   {
     document.getElementById(next_element).focus();
   }
}