Show / hide password using JSF / PrimeFaces is not working

          form i {
            margin-left: -25px;
            margin-top: 11px;
            cursor: pointer;
          }
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />

            <p:inputText id="productadminpassword" required="true"
                value="#{ApplicationManagedBean24.saveRequestMap['Object::MasterPassword']}"
                styleClass="inputField border" style="width:300px;"
                requiredMessage="Admin Password is mandatory"
                type="password">
                <p:ajax event="change" process="@this"
                    update="@([id$=Adminpasswordcheck]) @([id$=prodeletepassword])"
                    onstart="AdminpasswordMessageRemove();" />  
            </p:inputText>
            
         <i class="bi bi-eye-slash" id="togglePassword"></i>

         <script type="text/javascript">
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#productadminpassword');

togglePassword.addEventListener('click', function () {
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    this.classList.toggle('bi-eye');
});
</script>

These are i have done. Eye(eye-slash) icon is rendered, but it is not working and input text also remains hidden. I also tried new toggle feature in password tag. Kindly help me out.