JSFiddle - React, Tailwind, and code Playground

HTML

<input type="password" id="input-show" placeholder="Password">
<button id="passReveal">Reveal</button>

JavaScript

/* I tried this, but doesn't work.

$('#passReveal').on('click', function(){
    $( "#input-show" ).attr('type', 'text');
    if ($( "#input-show" ).attr('type', 'text')){
        $( "#input-show" ).attr('type', 'password');
    }
});
*/

/* I think this one is the closest, but I have a bug: you must click twice the button to make it work the first time, ¿WTF? */

$('#passReveal').on('click', function(){
    $( "#input-show" ).attr('type', 'text');
    $( "#input-show" ).toggleClass('passRevealed');
    if ($( "#input-show" ).hasClass('passRevealed')){  
        $( "#input-show" ).attr('type', 'password');        
    }
});