Show/Hide password form JS

Question

I am using Fluent Forms and have find this snippet:

passField.wrap("<div class='ff_input-group'></div>");
passField.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>');

$form.find(".toggle-password").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});

It works perfectly with the password field, but I have a confirm password field with att name: password_1

If I use this code repeatedly

passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password_1"> </i></span></div>');

$form.find(".toggle-password_1").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});

It shows the eye icon but changes the first password field on click, not in the confirmation one. Bot eyes icons change the first password field, but not the confirmation one.

What I am doing wrong?

Answer 1

Perhaps it is because you are not using an existing class, that is, you are telling it to search for an element by the class ".toggle-password_1", perhaps the most correct thing is to add an ID to it and search for said label by its ID.

The correction would be such that:

passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i id=¨confirmPass¨ style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>');

$form.find("#confirmPass").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField_1.attr("type") == "password") {
        passField_1.attr("type", "text");
    } else {
        passField_1.attr("type", "password");
    }
});

Pdt: The object was not called correctly in the function, the correct reference is "passField_1"

I'm new helping on stackoverflow, I hope my answer helped you :)