how to make the show password with an eye icon in html code example

Example 1: password visibility toggle

<div class="input-group">
  <input type="password" class="form-control pwd" id="login_password" placeholder="" name="password" required>
     <span class="input-group-btn" id="eyeSlash">
       <button class="btn btn-default reveal" onclick="visibility3()" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
     </span>
     <span class="input-group-btn" id="eyeShow" style="display: none;">
       <button class="btn btn-default reveal" onclick="visibility3()" type="button"><i class="fa fa-eye" aria-hidden="true"></i></button>
     </span>
  </div>


function visibility3() {
  var x = document.getElementById('login_password');
  if (x.type === 'password') {
    x.type = "text";
    $('#eyeShow').show();
    $('#eyeSlash').hide();
  }else {
    x.type = "password";
    $('#eyeShow').hide();
    $('#eyeSlash').show();
  }
}

Example 2: show password fa-eye javascript

$("body").on('click', '.toggle-password', function() {
  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $("#pass_log_id");
  if (input.attr("type") === "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }

});