ASP / HTML / Javascript not working properly

I am working on trying to create a dynamic password reset page where the red X favicons will turn to green check marks when proper conditions are met. Right now the red X stays even when conditions are met. How can I get this to work properly? I have the script in the body section right now. The password fields being validated are passR1 and passR2

<script>
         $("input[type=password]").keyup(function () {
             var ucase = new RegExp("[A-Z]+");
             var lcase = new RegExp("[a-z]+");
             var num = new RegExp("[0-9]+");

             if ($("#passR1").val().length >= 8) {
                 $("#8char").removeClass("fa-times");
                 $("#8char").addClass("fa-check");
                 $("#8char").css("color", "#00A41E");
             } else {
                 $("#8char").removeClass("fa-check");
                 $("#8char").addClass("fa-times");
                 $("#8char").css("color", "#FF0004");
             }

             if (ucase.test($("#passR1").val())) {
                 $("#ucase").removeClass("fa-times");
                 $("#ucase").addClass("fa-check");
                 $("#ucase").css("color", "#00A41E");
             } else {
                 $("#ucase").removeClass("fa-check");
                 $("#ucase").addClass("fa-times");
                 $("#ucase").css("color", "#FF0004");
             }

             if (lcase.test($("#passR1").val())) {
                 $("#lcase").removeClass("fa-times");
                 $("#lcase").addClass("fa-check");
                 $("#lcase").css("color", "#00A41E");
             } else {
                 $("#lcase").removeClass("fa-check");
                 $("#lcase").addClass("fa-times");
                 $("#lcase").css("color", "#FF0004");
             }

             if (num.test($("#passR1").val())) {
                 $("#num").removeClass("fa-times");
                 $("#num").addClass("fa-check");
                 $("#num").css("color", "#00A41E");
             } else {
                 $("#num").removeClass("fa-check");
                 $("#num").addClass("fa-times");
                 $("#num").css("color", "#FF0004");
             }

             if ($("#passR1").val() == $("#passR2").val()) {
                 $("#pwmatch").removeClass("fa-times");
                 $("#pwmatch").addClass("fa-check");
                 $("#pwmatch").css("color", "#00A41E");
             } else {
                 $("#pwmatch").removeClass("fa-check");
                 $("#pwmatch").addClass("fa-times");
                 $("#pwmatch").css("color", "#FF0004");
             }
         });
</script>

  <asp:TextBox ID="passR1" runat="server" type="password" placeholder="New Password" CssClass="form-control"></asp:TextBox>
 </div>
    <div class="input-group form-group">
       <div class="input-group-prepend">
         <span class="input-group-text"><i class="fa fa-key"></i></span>
        </div>
 <asp:TextBox ID="PassR2" runat="server" type="password" placeholder="Confirm Password" CssClass="form-control"></asp:TextBox>
   </div>
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
      <span id="8char" class="fa fa-times" style="color:#FF0004;"></span> 8 Characters Long<br/>
      <span id="ucase" class="fa fa-times" style="color:#FF0004;"></span> One Uppercase Letter<br />
       <span id="SpecChar" class="fa fa-times" style="color:#FF0004;"></span> One Special Character

<div class="col-sm-6">
 <span id="lcase" class="fa fa-times" style="color:#FF0004;"></span> One Lowercase Letter<br/>
 <span id="num" class="fa fa-times" style="color:#FF0004;"></span> One Number<br />
 <span id="pwmatch" class="fa fa-times" style="color:#FF0004;"></span> Passwords Match
 </div>
  </div>