Form Password and Comfirm Password visibility

                                <div class="form-group row">

                                  <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>

                                    <div class="input-group col-sm-10 mb-3">

                                        <input type="password" name="password" placeholder="Password" class="form-control " id="password">

                                        <div class="input-group-append">

                                            <div class="input-group-text">

                                                    <i class="fa fa-eye" id="togglePassword" aria-hidden="true"></i>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group row">

                                    <label for="inputPassword3" class="col-sm-2 col-form-label">Confirm Password</label>

                                      <div class="input-group col-sm-10 mb-3">

                                          <input type="password" name="password_confirmation" placeholder="Confirm Password" class="form-control " id="password1">

                                          <div class="input-group-append">

                                              <div class="input-group-text">

                                                      <i class="fa fa-eye" id="togglePassword1" aria-hidden="true"></i>

                                              </div>

                                          </div>

                                      </div>

                                  </div>

 

    <script>

        const togglePassword = document.querySelector('#togglePassword');

        const password = document.querySelector('#password');

        togglePassword.addEventListener('click', function (e) {

            // toggle the type attribute

            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';

            password.setAttribute('type', type);

            // toggle the eye / eye slash icon

            this.classList.toggle('bi-eye');

        });

    </script>

      <script>

        const togglePassword1 = document.querySelector('#togglePassword1');

        const password1 = document.querySelector('#password1');

        togglePassword1.addEventListener('click', function (e) {

            // toggle the type attribute

            const type = password1.getAttribute('type') === 'password' ? 'text' : 'password';

            password1.setAttribute('type', type);

            // toggle the eye / eye slash icon

            this.classList.toggle('bi-eye');

        });

    </script>