JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headertxtPassWord-Container" class="header-login-input-Container"> 
    <input id="headertxtPassWord" value="password" class="header-login-input"  />
</div>

JavaScript

$('.header-login-input').live('click', PopulateElement);

$('.header-login-input').live('blur', function() {
    if ($(this).val() === "")
    {
       $(".header-login-input-Container").html('');
       $(".header-login-input-Container").html("<input id=\"headertxtPassWord\" name=\"headertxtPassWord\" class=\"header-login-input\" value=\"password\" type=\"text\"/>");  
    }
});


function PopulateElement () {
if ($(this).val() === "password")
    {
       $(".header-login-input-Container").html('');
       $(".header-login-input-Container").html("<input id=\"headertxtPassWord\" name=\"headertxtPassWord\" class=\"header-login-input\" type=\"password\"/>");
        setTimeout(function() { $("#headertxtPassWord").focus()}, 10);
    }
}