Change attribute for a checkbox not working correctly

I've got a number of input boxes , of type password across different pages. Now I have a small checkbox, which says "show password", which when it's checked, changes this from type password to text. Simple right?

Now some genius in the business has decided that for one of the pages, they'd like the button to say "hide password" instead. But only for that one page. Now in theory, this works fine but what happens is, when I'm on the page that contains "hide password", the field only changes from type text to password when I "uncheck" the checkbox. i.e. I have to click this twice. How can I get around this? It's so simple I know but it's driving me mental. HTML:

<input type="checkbox" data-toggle-input="js-show-char-toggle" class="ml-small">Hide password
<input type="text" value="" class="js-show-char-toggle">

Show password

jQuery:

$('input[data-toggle-input]').on('click', function() {
    var $self = $(this),
            inputToggleClass = $self.data('toggle-input'),
            inputType = $self.prop('checked') ? 'text' : 'password';        

        $('.' + inputToggleClass).prop('type', inputType);

    });

You will see what I mean if you try the fiddle. If you use first checkbox, the field will only "hide" when you uncheck the checkbox. It works fine for the second one. What am I doing wrong?