Vary value of a modal function within javascript

Question

I have a password change field in a modal, in this field I have a function in java script that shows the password when clicking on the icon, as I am in a modal the function works only in the first user of the list, because, the code understands that there is only one. My question is how do I vary the name of Function according to modal?

  <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>

<!--Campo Senha-->
                            <form method="POST">
                            <div class='input-group col-lg-6'>
                                <div class='input-group-addon'>
                                    <span class='glyphicon glyphicon-question-sign'></span>
                                </div>
                                <input type='password' name='senha' id="senha" class='form-control' value="senha" placeholder='Nova Senha' style="background-color: PeachPuff;" ></div>
                                <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open " onclick="mostrar()"></button>
                            </form>
                            <script>
                                function mostrar(){
                                    var tipo = document.getElementById("senha");
                                    if(tipo.type == "password"){
                                        tipo.type = "text";
                                    }else{
                                        tipo.type = "password";
                                    }
                                }
                            </script>
                            <br>
                            <!--Fim Campo Senha-->

Answer 1

There is no need to create a function for each situation. That would be bad. Use only one function. Do not use id for that purpose, since a id should be unique on a page. Grab the element by the proximity of the button clicked, how to find the element by name within the same container.

Delete the attribute id="senha" of the elements, it is not necessary.

You get it this way:

In the onclick, include the parameter this:

<button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" onclick="mostrar(this)"></button>

And change the function to:

function mostrar(e){
   var tipo = e.parentNode.querySelector("[name='senha']");
   if(tipo.type == "password"){
       tipo.type = "text";
   }else{
       tipo.type = "password";
   }
}

Example:

function mostrar(e){
   var tipo = e.parentNode.querySelector("[name='senha']");
   if(tipo.type == "password"){
       tipo.type = "text";
   }else{
       tipo.type = "password";
   }
}

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

<form method="POST">
 <div class='input-group col-lg-6'>
     <div class='input-group-addon'>
         <span class='glyphicon glyphicon-question-sign'></span>
     </div>
     <input type='password' name='senha' id="senha" class='form-control' value="senha" placeholder='Nova Senha' style="background-color: PeachPuff;" ></div>
     <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" onclick="mostrar(this)"></button>
 </form>