Bootstrap 4中表单元素后面的JQuery显示/隐藏密码按钮

Question

我正在尝试使用 Bootstrap 4 以一种形式实现 JQuery 的密码显示/隐藏按钮。但是，从屏幕截图中可以看到，该按钮显示在表单字段的后面，并且帮助消息正在扩展表单元素。

该按钮确实起作用，它在键入时显示并显示密码。因此，我尝试获取 Bootstrap input-group-append来切换显示/隐藏。

是否有办法让按钮显示在表单字段的前面，或者至少使input-group-append切换？

在该字段中键入之前：

在该字段中输入后：

<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>

<script src="/js/hideShowPassword.min.js"></script>

<script>
$.validator.addMethod('validPassword',
    function(value, element, param) {

        if (value != '') {
            if (value.match(/.*[a-z]+.*/i) == null) {
                return false;
            }
            if (value.match(/.*\d+.*/) == null) {
                return false;
            }
        }

        return true;
    },
    'Must contain at least one letter and one number'
);


</script>


<script>

    $(document).ready(function () {

        /**
         * Validate the form
         */
        $('#formPassword').validate({
            rules: {
                password: {
                    required: true,
                    minlength: 6,
                    validPassword: true
                }
            }
        });

        /**
         * Show password toggle button
         */
        $('#inputPassword').hideShowPassword({
            show: false,
            innerToggle: 'focus'
        });
    });

</script>



<form method="post" id="formPassword" action=""">

    <div class="form-group row">
        <label for="inputPassword" class="col-4 col-form-label">Password</label>
        <div class="col-6">
            <div class="input-group">
                <input id="inputPassword" name="password" placeholder="At least 6 characters with 1 number" class="form-control here" required type="text">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="fas fa-eye"></i></span>
                </div>
            </div>
        </div>
    </div>


    <div class="form-group row">
        <div class="offset-4 col-8">
            <button type="submit" class="btn btn-primary btn-lg mb-2"><i class="fas fa-save pr-2"></i>Save</button>
            <a class="btn btn-danger btn-lg" role="button" href="/profile/show"><i class="fas fa-ban pr-2"></i>Cancel</a>
        </div>
    </div>
</form>