Password fields

by joplomacedo

HTML

<div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="New password">
      <span class="changePwAlert is-hidden"></span>
</div>
<div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="Confirm new password">
    <span class="changePwAlert is-hidden"></span>
</div>


<div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="New password">
    <span class="changePwAlert is-hidden"></span>
</div>
<div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="Confirm new password">
    <span class="changePwAlert is-hidden"></span>
</div>

  <div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="New password">
      <span class="changePwAlert is-hidden"></span>
</div>
<div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="Confirm new password">
    <span class="changePwAlert is-hidden"></span>
</div>


<div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="New password">
    <span class="changePwAlert is-hidden"></span>
</div>
<div class="inputWrapper">
    <input class="changePwInput" type="password" placeholder="Confirm new password">
    <span class="changePwAlert is-hidden"></span>
</div>

<input class="submitBtn" type="submit" />

CSS

input {
    outline:none;
    box-sizing:border-box;
    border:1px solid rgba(0,0,0,0.15);
    box-shadow:none;
    vertical-align:top;
    width:100%;
    padding:6px;
}

body {
    font-family:helvetica, arial, sans-serif;
}

.inputWrapper {
    font-size:0;
    position:relative;
}

.changePwAlert {
    border:1px solid rgba(0,0,0,0.15);
    border-radius:2px;
    position:absolute;
    top:4px;
    bottom:4px;
    right:4px;
    font-size:11px;
    background:#eee;
    text-shadow:0 1px #fff;
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -1px 1px rgba(0,0,0,0.05);
    padding:2px 5px;
}

.changePwAlert.is-visible {
    visibility:visible;
}

.changePwAlert.is-hidden {
    visibility:hidden;
}

.changePwAlert.is-positive {
    color:#6ca526;
}

.changePwAlert.is-negative {
    color:#CD5C5C;
}

JavaScript

var bs = {

       changes_arr:  [false],
       matches_arr:  [true],
       arrays_pos:  0,
       
       $returnPwKeyupVersion:  function( $pair1, $pair2, arrays_pos ) {
             var $pair1_alert = $pair1.next(),
                 $pair2_alert = $pair2.next(),
                 $pair_alerts = $pair1_alert.add($pair2_alert),
                 self = this;
             
             return function() {
                   var val_$pair1 = $pair1.val(),
                       val_$pair2 = $pair2.val(),
                       $p_as = $pair_alerts,
                       arrs_p = arrays_pos;

                   
                   if (val_$pair1.length === 0 && val_$pair2.length === 0) {
                       self.changes_arr[arrs_p] = false;
                       self.matches_arr[arrs_p] = true;
                         
                       $p_as
                               .removeClass('is-visible')
                               .addClass('is-hidden');
                         
                   } else {
                         self.changes_arr[arrs_p] = true;

                         $p_as
                               .removeClass('is-hidden')
                               .addClass('is-visible');
                         
                         if (val_$pair1 === val_$pair2) {
                               self.matches_arr[arrs_p] = true;
                               
                               $p_as
                                     .text("Passwords match.")
                                     .removeClass('is-negative')
                                     .addClass('is-positive');
                         } else {
                             self.matches_arr[arrs_p] = false;
                                              
                             $p_as
                                     .text("Passwords don't match.")
                                     .removeClass('is-positive')
                                    ...