JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li><input type="password" name="password" id="password" > <span class="password-showhide" ><span class="show-password">Show</span><span class="hide-password">hide</span></span><li>
<li><input type="password" name="password" id="confirmPassword" > <span class="confirm-password-showhide" ><span class="show-password">Show</span><span class="hide-password">hide</span></span><li>
</ul>
CSS
li{ list-style:none}
.hide-password{display:none}
JavaScript
$(".password-showhide .show-password").click(function() {
$("#password").attr("type", "text");
$(".password-showhide .show-password").hide();
$(".password-showhide .hide-password").show();
});
$(".password-showhide .hide-password").click(function() {
$("#password").attr("type", "password");
$(".password-showhide .hide-password").hide();
$(".password-showhide .show-password").show();
});
$(".confirm-password-showhide .show-password").click(function() {
$("#confirmPassword").attr("type", "text");
$(".confirm-password-showhide .show-password").hide();
$(".confirm-password-showhide .hide-password").show();
});
$(".confirm-password-showhide .hide-password").click(function() {
$("#confirmPassword").attr("type", "password");
$(".confirm-password-showhide .hide-password").hide();
$(".confirm-password-showhide .show-password").show();
});