Jason12

<div class="container">
  <input maxlength="10">
</div>

const container = document.querySelector('.container');
const input = container.querySelector('input').cloneNode();

container.addEventListener('input', ({ target: t }) => {
  if (t.value.length === +t.maxLength) {
    const nextInput = t.nextElementSibling || input.cloneNode();
    t.insertAdjacentElement('afterend', nextInput);
    nextInput.focus();
  }
});

Переписал код с ES5 на ES6

Брехня. Первое что видим, открыв оба варианта - const и шаблонную строку. То есть, у вас везде используются возможности ES6. Во втором варианте (это который якобы ES6) для сохранения контекста зачем-то применяется bind вместо arrow functions.

Теперь какие косяки были вами допущены:

• забыли подключить jquery
  
• в методе clickarea неправильно привязали контекст, в результате пытаетесь вызывать несуществующий метод
  
• в методе _setupDrag неправильно вешаете обработчик mousemove или в методе _finishDrag неправильно снимаете - в первом у вас addEventListener, во втором off
  
• в методе _updateTrackFill неправильно вычисляется новая позиция - должно быть this._length вместо length
  

Вот исправленный вариант.