Registration form show hide password with javascript

 

  <div class="row mt-3">

    <div class="col-md-6">

            <label class=""

                for="password">{{ translate('Password') }} <span

                    class="text-danger">*</span></label>

            <div class="" style="padding: 0px">

                <div class="input-group mb-2 mr-sm-2">

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

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

<i class="las la-eye" id="eye"></i>

                        </div>

                    </div>

                    <input type="password"

                        class="form-control

{{ $errors->has('password') ? ' is-invalid' : '' }}"

                        id="password" name="password"

value="{{ old('password') }}"

                        placeholder="{{ translate('Password') }}" required>

                </div>

            </div>

            @if ($errors->has('password'))

                <div class="">

                </div>

                <div class="">

                    <span class="invalid-feedback" role="alert">

                        <strong>{{ $errors->first('password') }}</strong>

                    </span>

                </div>

            @endif

            <div class="">

            </div>

           

<div class="" style="padding: 0px">

                <div id="message">

                 <h3 style="font-size: 13px;padding-left: 15px">

Password must contain the

                        following:</h3>

                    <p id="letter" class="invalid">A <b>lowercase</b>

letter</p>

                    <p id="capital" class="invalid">A <b>

capital (uppercase)</b> letter</p>

                    <p id="number" class="invalid">A <b>number</b></p>

                    <p id="length" class="invalid">Minimum <b>

8 characters</b></p>

                </div>

            </div>

    </div>

    <div class="col-md-6">

        <label class=""

        for="password_confirmation">{{ translate('Confirm Password') }}

<span

            class="text-danger">*</span></label>

    <div class="" style="padding: 0px">

        <div class="input-group mb-2 mr-sm-2">

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

                <div class="input-group-text"><i class="las la-eye"

id="eyeConfimr"></i>

                </div>

            </div>

            <input type="password"

                class="form-control

{{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}"

                id="password_confirmation" name="password_confirmation"

                placeholder="{{ translate('Confirm Password') }}" required>

        </div>

    </div>

    @if ($errors->has('password'))

        <div class="">

        </div>

        <div class="">

        </div>

    @endif

    </div>

</div>

// show hide password      

$(function () {

$('#eye').click(function () {

                const passwordInput = $('#password');

                if (passwordInput.attr('type') === 'password') {

                    $(this).removeClass('fa-eye-slash').addClass('fa-eye');

                    passwordInput.attr('type', 'text');

                } else {

                    $(this).removeClass('fa-eye').addClass('fa-eye-slash');

                    passwordInput.attr('type', 'password');

                }

            });

            $('#eyeConfimr').click(function () {

                const confirmPasswordInput = $('#password_confirmation');

                if (confirmPasswordInput.attr('type') === 'password') {

                    $(this).removeClass('fa-eye-slash').addClass('fa-eye');

                    confirmPasswordInput.attr('type', 'text');

                } else {

                    $(this).removeClass('fa-eye').addClass('fa-eye-slash');

                    confirmPasswordInput.attr('type', 'password');

                }

            });

        });

        // end show hide password