маску на два инпута для ввода телефона

(function(){ 
 
const moo = document.getElementsByClassName('moo'); 
//сразу ставим фокус при клике на div id="focus".  
//click можно заменить на mouseenter и смотреть что там получается 
document.getElementById('focus').addEventListener('click',function(){ 
  const L0 = moo[0].value.length; 
  const L1 = moo[1].value.length; 
  const L2 = moo[2].value.length; 
  const L3 = moo[3].value.length; 
  //проверяем, если везде всё заполнено - возвращаемся и ничего не трогаем 
  if( L0 == 3 && L1 == 3 && L2 == 2 && L3 == 2 ) {return;} 
  //если оно не вернулось и всё еще тут - проверит остальные варианты заполнения 
  //(на случай, если пользователь заполнил не всё. Чтобы всегда фокус не ставился на первом) 
       if( L0 < 3 ) { moo[0].focus(); } 
  else if( L0 == 3 && L1 < 3) { moo[1].focus(); } 
  else if( L0 == 3 && L1 == 3 && L2 < 2) { moo[2].focus(); } 
  else if( L0 == 3 && L1 == 3 && L2 == 2) { moo[3].focus(); } 
});//Символ && означает "и" = одновременное выполнение нескольких условий 
 
//Само переключение фокуса при вводе 
for(let i = 0; i < moo.length; i++){ 
  moo[i].addEventListener('input', function(){ 
    //для этого в HTML добавил data-num=".." чтобы здесь получить это число 
    //и не добавлять лишних условий. Условие i < 3, чтобы не было ошибки 
    if( i < 3 && this.value.length == Number( this.dataset.num ) ){ 
      moo[(i+1)].focus(); 
    } 
    //на последнем инпуте не переключение фокуса нужно, а запрет... 
    //Если введенное число оказалось 3-м, режем введенное через slice() 
    //оставляя только первые 2 символа 
    if( moo[3].value.length > 2 ){ 
      moo[3].value = moo[3].value.slice(0,2); 
    } 
  }); 
   
  //keyup дает возможность определить нажатую кнопку. 
  //если внутри текущего инпута пусто, а был нажат b-space, переключаем фокус 
  moo[i].addEventListener('keyup', function(e){ 
    if( e.key.match(/Backspace/ig) && this.value.length == 0 && i > 0) { 
        moo[(i-1)].focus(); 
    } 
  }); 
} 
 
})();

.black {font-size:20px;display:inline-block;} 
.orange {border-bottom: 2px solid orange;display:inline-block;} 
.moo { 
  border:none; 
  outline:none; 
  width: 30px; 
  text-align:center; 
}

<div id="focus"> 
  <div class="black">+7 ( </div> 
  <div class="orange"> 
    <input class="moo" data-num="3" placeholder="* * *"> 
  </div> 
  <div class="black"> ) </div> 
  <div class="orange"> 
    <input class="moo" data-num="3" placeholder="* * *"> -  
    <input class="moo" data-num="2" placeholder="* *"> -  
    <input class="moo" data-num="2" placeholder="* *"> 
  </div> 
</div>