问自动选项卡无法工作，无法找到同一个类的下一个实例

EN

if ($next.length) {
  $(this).next('.pin-input').focus();
}

if ($next.length) {
  $next.focus();
}

$(".pin-input").keyup(function() {
  this.value = this.value.replace(/[^0-9\.]/g, '');

  if (this.value.length == this.maxLength) {
    var $next = $(this).parent().next('.input-container').find('.pin-input');

    if ($next.length) {
      $next.focus();
    } else {
      $(this).blur();

    }

  }
});

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

label { font-size: 0;}
.input-container {
  display:inline-block;
 
  }
  .pin-input{
     width: 48px;
  height: 48px;
  text-align: center
  }
  .container{
    width: 530px;
  }
  .show-password {
    font-size: 0;
  }
  
  .fa {
    font-size: 30px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <button type="button" class="show-password">Show/Hide
    <i class="icon-hide-password"></i>
  </button>
</div>