How to show and hide password when click on eye icon using jQuery and also both the password (new and confirm) should be matched

[enter image description here](https://ienter image description here.stack.imgur.com/ZuIPX.jpg)

Solution

I have one implementation in my project, which I am sharing here, you can also use it for sure, let me know if it works for you:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Password</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .password-container {
            position: relative;
        }

        .password-input {
            padding-right: 30px;
        }

        .eye-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="password-container">
    <label for="new-password">New Password:</label>
    <input type="password" id="new-password" class="password-input" required>
    <span class="eye-icon" id="toggle-new-password">👁️</span>
</div>

<div class="password-container">
    <label for="confirm-password">Confirm Password:</label>
    <input type="password" id="confirm-password" class="password-input" required>
    <span class="eye-icon" id="toggle-confirm-password">👁️</span>
</div>

<script>
    $(document).ready(function () {
        // Show/hide password for new password input
        $('#toggle-new-password').on('click', function () {
            togglePasswordVisibility('#new-password');
        });

        // Show/hide password for confirm password input
        $('#toggle-confirm-password').on('click', function () {
            togglePasswordVisibility('#confirm-password');
        });

        // Function to toggle password visibility
        function togglePasswordVisibility(passwordField) {
            var passwordInput = $(passwordField);
            var fieldType = passwordInput.attr('type');
            var newFieldType = (fieldType === 'password') ? 'text' : 'password';
            passwordInput.attr('type', newFieldType);
        }

        // Check if new and confirm passwords match
        $('#confirm-password, #new-password').on('keyup', function () {
            var newPassword = $('#new-password').val();
            var confirmPassword = $('#confirm-password').val();

            if (newPassword === confirmPassword) {
                // Passwords match
                // You can add your code here if needed
            } else {
                // Passwords do not match
                // You can add your code here if needed
            }
        });
    });
</script>

</body>
</html>