Значок глаза пароля начальной загрузки не работает должным образом

Question

Я использую сгенерированный загрузчиком класс css в jsp.Я пытаюсь создать текстовое поле пароля со значком глаза, которое после щелчка пользователя изменится на значок слеша.и тип ввода пароля изменится на тип текста.

Функция JS

  (function () {
    'use strict';
    $('.show-hide-password i').on('click', function() {
        let that = this;
        let input = $(that).closest('.show-hide-password').find('input');

        if ($(input).attr('type') === "password") {
            $(that).removeClass('fa-eye').addClass('fa-eye-slash'); // toggle our classes for the eye icon
            $(input).attr('type','text')
        } else {
            $(this).removeClass('fa-eye-slash').addClass('fa-eye'); // toggle our classes for the eye icon
            $(input).attr('type','password')
        }
    });
})();

jsp

<div class="form-group">
<label>Password</label> 
<span class="text-primary">*</span>
 <div class="input-group-alert mb-3">
    <div class="input-group show-hide-password">
        <form:password id="password" path="password"                                                 
         class="form-control" placeholder="Password" required="" />
            <div class="input-group-append">
                <span class="input-group-text"> 
                  <i class="fa fa-eye" aria-hidden="true"></i> 
                </span>
            </div>
    </div>
    <div class="btn btn-more-info"></div>
    <div id="password_errdiv" style="margin-top: 5px;">
        <span id="password_err" name="password_err"> </span>
    </div>
</div>
</div>

Я не уверен, что я делаю неправильно в jsp.Он не меняется ни на значок глаза, ни на текст.

Я не могу изменить функцию js.Только изменения, которые я могу внести в jsp.

Я включил файл js в свой заголовок, например

<script src="https://***.js" type="text/javascript" ></script>

Может кто-нибудь помочь мне?