JSFiddle - React, Tailwind, and code Playground

HTML

Enter your phone number: <input type="text" id="phone_area" name="phone_area" maxlength="3" onkeyup="advance_phone(event, 'phone_prefix')" style="width: 30px;" />
<input type="text" id="phone_prefix" name="phone_prefix" maxlength="3" onkeyup="advance_phone(event, 'phone_suffix')" style="width: 30px;" />
<input type="text" id="phone_suffix" name="phone_suffix" maxlength="4" style="width: 40px;" />

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();
   }
}