How to add functionality for eye icons separately for more than one password field?

In registration and login forms password fields will be there. To disclose those passwords eye icons is added. If there are more than one password is there, eye icons has to be added for each of the fields respectively.

Inbuilt font-awesome icons are there to add the eye icon in the password fields. so, these inbuilt eye icons has been added above the password input fields in the HTML code and then it should positioned in the field by using some styling.

<div class="password-desktop">
            <i class="eye-icon1 fa-eye"></i>
        </div>
        <input type="password" name="password" id="register-password" placeholder="Password "class="login-register-register-form-input">
    </div>

 <div class="password-desktop">
            <i class="eye-icon2 fa-eye"></i>
        </div>
        <input type="password" name="password2" id="register-password2" placeholder=" Confirm Password "class="login-register-register-form-input">
    </div>

<script>
    $(document).on('click', '.eye-icon1', function () {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $("#register-password");
        input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
    });
    $(document).on('click', '.eye-icon2', function () {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $("#register-password2");
        input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
    });
</script>

By using JavaScript we can give the functionality for the eye icons. when the eye icon is clicked to disclose the password field respectively that field only needs to be opened without disturbing the other fields. We have to add differentiate the inbuilt classes by giving numbers after them.