How to make a 'show password' button in two fields?

Question

JavaScript

There is a template:

<div class="current_password">
  <span class="icon_current_password">
    <i class="fa fa-lock"></i>
  </span>
  <input autocomplete="off" class="form_current_password" type="password" id="inputCurrentPassword" value="">
</div>

<div class="new_password">
  <span class="icon_new_password">
    <i class="fa fa-key"></i>
  </span>
  <input class="form_new_password" type="password" id="inputNewPassword" value="">
    <label for="show_pass" class="input-group-addon">
      <label class="pointer" for="show_pass">
        <i class="fa fa-eye"></i>
      </label>
      <input type="checkbox" id="show_pass">
    </label>
</div>

And there is a script:

<script>
(function ($) {
    $.toggleShowPassword = function (options) {
        var settings = $.extend({
            field: "#password",
            control: "#toggle_show_password",
        }, options);

        var control = $(settings.control);
        var field = $(settings.field)

        control.bind('click', function () {
            if (control.is(':checked')) {
                field.attr('type', 'text');
            } else {
                field.attr('type', 'password');
            }
        })
    };
}(jQuery));

$.toggleShowPassword({
    field: '#inputNewPassword',
    control: '#show_pass'
});
</script>

The .new_password field contains a button that, when clicked, will show the password.
How to make a similar button in the .current_password field ?

Answer 1

Given your code, you need to add one more checkbox, give it an id and call the "toggleShowPassword" function for it
Example solution