<p>
  <div class="input-container">
    <input type="text" class="input-text" maxlength="4">
    <input type="text" class="input-text" maxlength="4">
    <input type="text" class="input-text" maxlength="4">
    <input type="text" class="input-text" maxlength="4">
  </div>
</p>
<p>
  <button id="toggle-borders">Toggle borders</button>
</p>

.input {
  &-text {
    width: 50px;
    outline: 0;
    
    &.no-border {
      border: 0;
    }
  }
  
  &-container {
    display: inline-block;
    border: 1px solid #000;
    padding: 5px;
  }
}

body {
  margin: 20px;
}

var a = '';
var b = '';

// input event handlers
$('.input-text').click(function(e) {
  
  $(this).siblings(':first-child').focus();
  
}).keydown(function() {
  
  a = $(this).val();
  
}).keyup(function(e) {
  
  b = $(this).val();
  
  if (a === b && b.length == 0 && e.keyCode == 8) {
    
    var v = $(this).prev().val();
    
    v = v.substring(0, v.length - 1);
    $(this).prev().val(v);
    $(this).prev().focus();
    
  }
  
  if ($(this).val().length == 4) {
    $(this).next().focus();
  }
  
}).focus(function() {
  
  if ($(this).val().length == 4) {
    $(this).next().focus();
  }
  
});

// border toggle
$('#toggle-borders').click(function() {
  $('.input-text').toggleClass('no-border');
});