JSFiddle - React, Tailwind, and code Playground

by de Montalembert Jonathan

HTML

<link rel="stylesheet" href="//current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css">
<input type='password' placeholder="Password"><br />
<input type='text'><br />
<input type='email'><br />
<input type='password' placeholder="Other password"><br />
<input type='submit' class='btn btn-primary'><br />

JavaScript

var reveal = function(msgIn, msgOut){
    msgIn = msgIn || "Reveal it!";
    msgOut = msgOut || "Hide It!";
   

    $("input[type=password]").each(function(){
        var self = $(this);
        $(this).after("<span id='revealctrl'></span>")
            .next()
            .append("<input type=checkbox id='revealCheckbox'>")
            .append("<span id='revealMessage'>"+msgIn+"<span>")
            .find("#revealCheckbox")
            .click(function(){
                if($(this).attr('checked')){
                    self[0].type = "text";
                    msg = msgOut;
                }
                else{
                    self[0].type = "password";
                    msg = msgIn;
                }
                msg = "<span id='revealMessage'>"+msg+"</span>";
                $(this).next().remove().end().after(msg);
        });
    });
}
    reveal()