Show Password entered in two fields by clicking only one icon

Question

I have a page to change the password of the user with two fields one for the password and another to confirm the password. I would like to know how to show in the two fields the password entered by clicking on only one icon, in the code below with only one of the fields.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="card card-container" style="margin-top: 100px;">
            <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
            <div align="center" style="margin-top: 30px;">
            <th></th>
            <br><br><div style="color: rgb(104, 145, 162); font-size: 150%;">Mudar Senha</div>
            </div><br><div style="color: red; text-align: center">Alteração De Senha</div>
            <p id="profile-name" class="profile-name-card"></p>
            <form class="form-signin" method="POST" action="pass_user.php">
			<input type="hidden" name="usuario" value="<?php print $usuário = $_SESSION['usuarioId']; ?>" >
                <input type="password" id="inputPassword1" class="form-control" name="senha1" placeholder="Nova Senha" required autofocus><br>
                <input type="password" id="inputPassword2" name="senha2" class="form-control" placeholder="Confirme Nova Senha" required>
				<button type="button" class="btn btn-sm glyphicon glyphicon-eye-open " style="background:transparent;border:none;" onclick="mostrar()"></button>
                            </form>
                            <script>
                                function mostrar(){
                                    var tipo = document.getElementById("inputPassword1");
                                    if(tipo.type == "password"){
                                        tipo.type = "text";
                                    }else{
                                        tipo.type = "password";
                                    }
                                }
                            </script>
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Login</button>
</form><!-- /form -->
	
	   <script>
    $('form').on('submit', function () {
        if ($('#inputPassword1').val() != $('#inputPassword2').val()) {
            alert('Senhas diferentes');
            return false;
        }
    });
</script>           

Answer 1

To show the password in both at the same time just need to grab the new field, and apply the type of the first:

var tipo2 = document.getElementById("inputPassword2");
tipo2.type = tipo.type; //aplica o tipo que ficou no primeiro campo

Take the example:

function mostrar() {
  var tipo = document.getElementById("inputPassword1");
  var tipo2 = document.getElementById("inputPassword2");

  if (tipo.type == "password") {
    tipo.type = "text";
  } else {
    tipo.type = "password";
  }

  tipo2.type = tipo.type; //aplica o tipo que ficou no primeiro campo
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="card card-container" style="margin-top: 100px;">
  <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
  <div align="center" style="margin-top: 30px;">
    <th></th>
    <br><br>
    <div style="color: rgb(104, 145, 162); font-size: 150%;">Mudar Senha</div>
  </div><br>
  <div style="color: red; text-align: center">Alteração De Senha</div>
  <p id="profile-name" class="profile-name-card"></p>
  <form class="form-signin" method="POST" action="pass_user.php">
    <input type="hidden" name="usuario" value="<?php print $usuário = $_SESSION['usuarioId']; ?>">
    <input type="password" id="inputPassword1" class="form-control" name="senha1" placeholder="Nova Senha" required autofocus><br>
    <input type="password" id="inputPassword2" name="senha2" class="form-control" placeholder="Confirme Nova Senha" required>
    <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" style="background:transparent;border:none;" onclick="mostrar()"></button>
  </form>

  <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Login</button>
  </form>
  <!-- /form -->

  <script>
    $('form').on('submit', function() {
      if ($('#inputPassword1').val() != $('#inputPassword2').val()) {
        alert('Senhas diferentes');
        return false;
      }
    });
  </script>

If you want you can also transform your if in a ternary that is shorter and with the same readability:

tipo.type = tipo.type == "password" ? "text" : "password";

Edit:

To also change the icone, you need to be able to analyze the icone that is and change what you have. Since icons have to do with applied classes, you can use the functions contains, add and remove of classList.

Of course I could do with Jquery too, but since the first part of the code is made in pure JS, I show the part of the icon also in pure JS.

Implementation:

function mostrar() {
  var tipo = document.getElementById("inputPassword1");
  var tipo2 = document.getElementById("inputPassword2");

  if (tipo.type == "password") {
    tipo.type = "text";
  } else {
    tipo.type = "password";
  }

  tipo2.type = tipo.type; //aplica o tipo que ficou no primeiro campo
  
  
  var botao = document.querySelector(".btn.btn-sm"); //obter o botão
  
  if (botao.classList.contains("glyphicon-eye-open")){ //se tem olho aberto
      botao.classList.remove("glyphicon-eye-open"); //remove classe olho aberto
      botao.classList.add("glyphicon-eye-close"); //coloca classe olho fechado
  }
  else { //senão
      botao.classList.remove("glyphicon-eye-close"); //remove classe olho fechado
      botao.classList.add("glyphicon-eye-open"); //coloca classe olho aberto
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="card card-container" style="margin-top: 100px;">
  <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
  <div align="center" style="margin-top: 30px;">
    <th></th>
    <br><br>
    <div style="color: rgb(104, 145, 162); font-size: 150%;">Mudar Senha</div>
  </div><br>
  <div style="color: red; text-align: center">Alteração De Senha</div>
  <p id="profile-name" class="profile-name-card"></p>
  <form class="form-signin" method="POST" action="pass_user.php">
    <input type="hidden" name="usuario" value="<?php print $usuário = $_SESSION['usuarioId']; ?>">
    <input type="password" id="inputPassword1" class="form-control" name="senha1" placeholder="Nova Senha" required autofocus><br>
    <input type="password" id="inputPassword2" name="senha2" class="form-control" placeholder="Confirme Nova Senha" required>
    <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" style="background:transparent;border:none;" onclick="mostrar()"></button>
  </form>

  <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Login</button>
  </form>
  <!-- /form -->

  <script>
    $('form').on('submit', function() {
      if ($('#inputPassword1').val() != $('#inputPassword2').val()) {
        alert('Senhas diferentes');
        return false;
      }
    });
  </script>