JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="password-group">
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98">
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a>
</div>
<div class="password-group">
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98">
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a>
</div>
<div class="password-group">
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98">
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a>
</div>
<div class="password-group">
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98">
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a>
</div>

CSS

.password-group {
    position: relative;
    width: 300px;
}

.password-group > input {
    width: 100%;
}

.password-visibility {
    position: absolute;
    right: 8px;
    top: 2px;
}

JavaScript

$(function() {
    $('.password-group').find('.password-box').each(function(index, input) {
        var $input = $(input);
        $input.parent().find('.password-visibility').click(function() {
            var change = "";
            if ($(this).find('i').hasClass('fa-eye')) {
                $(this).find('i').removeClass('fa-eye')
                $(this).find('i').addClass('fa-eye-slash')
                change = "text";
            } else {
                $(this).find('i').removeClass('fa-eye-slash')
                $(this).find('i').addClass('fa-eye')
                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);
    });
});