JSFiddle - React, Tailwind, and code Playground

HTML

<input type="password" id="password" name="password" class="showpassword" />
<button>Show Password</button>

CSS

#password {
   border: 1px solid #f00;
 }

JavaScript

$(function () {
  $(".showpassword").each(function (index, input) {
    var $input = $(input);
    $("button").click(function () {
      var change = "";
      if ($(this).html() === "Show Password") {
        $(this).html("Hide Password")
        change = "text";
      } else {
        $(this).html("Show Password");
        change = "password";
      }
      var rep = $("<input type='" + change + "' />")
        .attr("id", $input.attr("id"))
        .attr("name", $input.attr("name"))
        .attr('class', $input.attr('class'))
        .val($input.val())
        .insertBefore($input);
      $input.remove();
      $input = rep;
    }).insertAfter($input);
  });
});