JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

SSN:
<div class="form-group">
   <input type="text" class="autoTab" tabindex="1" maxlength="3"> - 
   <input type="text" class="autoTab" tabindex="2" maxlength="2"> - 
   <input type="text" class="autoTab" tabindex="3" maxlength="3">
</div>
<br><br>
Don't autoTab to this group:
<div class="form-group">
   <input type="text" class="autoTab" tabindex="4" maxlength="3"> - 
   <input type="text" class="autoTab" tabindex="5" maxlength="2"> - 
   <input type="text" class="autoTab" tabindex="6" maxlength="3">
</div>

CSS

.autoTab {width: 40px}

JavaScript

$('.autoTab').keyup(function(){
    if ( $(this).val().length == $(this).attr("maxlength") ){
        $(this).closest('.form-group')
               .find('.autoTab[tabindex='+parseInt(parseInt($(this).attr("tabindex"))+1)+']')
                  .focus()
                  .select();
    }
});