JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="input-group">
    <input type="password" value="test value" name="password" id="id_password" class="form-control" placeholder="Password">
    <span id="show_password" title="Click here to show/hide password" class="input-group-addon" style="cursor: pointer;"><i id="button-eye" class="fa fa-eye"></i></span>
</div>

JavaScript

var eye_button = document.querySelector('#button-eye');

  eye_button.addEventListener('click', function (event) {
    eye_button_checked = true;
    var password = document.querySelector('#id_password');
    console.log("click");

    if (eye_button_checked) {
      // Show the password
      password.type = 'text';
    } else {
      // Hide the password
      password.type = 'password';
      eye_button_checked = false
    }
    // need to change icon to fa-eye-slash and change password.type to password again

  }, false);