JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group mbs">
  <label for="password" class="label-medium mbxs">Password</label>
  <br>
  <input type="password" name="password" class="form-control input-medium" required>
</div>

<div class="form-group mbs">
  <label for="passwordConfirm" class="label-medium mbxs">Password Confirm</label>
  <br>
  <input type="password" name="passwordConfirm" class="form-control input-medium mbs" required>
  <br>
  <a href="" id="generate-password" class="btn btn-large btn-green-gradient">Generate Password</a>
  <a href="" id="show-password" class="btn btn-large btn-red-gradient">Show/Hide Password</a>
</div>

JavaScript

$("#show-password").click(function(e) {
  e.preventDefault();
  if ($("input[name='password']").attr('type') == 'password' && $("input[name='passwordConfirm']").attr('type') == 'password') {

    $("input[name='password']").attr('type', 'text');
    $("input[name='passwordConfirm']").attr('type', 'text');
  } else {

    $("input[name='password']").attr('type', 'password');
    $("input[name='passwordConfirm']").attr('type', 'password');
  }
});
$()