JSFiddle - React, Tailwind, and code Playground

HTML

password: <input type='password' id='password1'>

<br>
    retype password: <input type='password' id='password2'><br>
    <div id='messageHolder' style="display:none">
    show passwords<input type='checkbox' id='togglePassword' />
    </div>

JavaScript

jQuery(function(){ 
   jQuery('#password2').bind('blur',_checkPasswords);
    jQuery('#togglePassword').bind('change',_togglePasswordText);
});

    function _checkPasswords()
    {
        if(jQuery('#password1').val()!=jQuery('#password2').val())
        {
             jQuery('#messageHolder').show();
        }
    }

function _togglePasswordText()
{
  if(jQuery('#togglePassword').is(':checked'))
    {       
        jQuery('#password2,#password1').each(function(){
            var _elm= jQuery(this);
            var _val=_elm.val();
            var _id= _elm.attr('id')
            jQuery(this).replaceWith('<input id='+_id+' value='+_val+' type="text">')
        });
     }
   else
   {
        jQuery('#password2,#password1').each(function(){
            var _elm= jQuery(this);
            var _val=_elm.val();
            var _id= _elm.attr('id')
            jQuery(this).replaceWith('<input id='+_id+' value='+_val+' type="password">')
        });
   }
}