如何查看和隐藏表的所有行的密码

Question

The show password function only works on the first row of the entry and is not working on the next entries/rows. The items are displayed by php through the database using foreach. how will the show/hide password work for all entries? any ideas?? I have the code as follows:

Html:

<td data-title="Password"><input id="viewPass" type="password" value="<?php echo $item["password"]; ?>" readonly/></td>
<button type="button" id="viewPswd" class="btn btn-default"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
<script src="js/showPass.js"></script>

Javascript:

 var myButton = document.getElementById('viewPswd'),
  myInput = document.getElementById('viewPass');
  myButton.onclick = function () {

      'use strict';

      if (this.id === 'viewPswd') {
          myInput.setAttribute('type', 'text');
          this.textContent = 'Hide';

      } else {

           myInput.setAttribute('type', 'password');

           this.id = 'viewPswd';
      }
  };

Answer 1

If you want to work with multiple buttons and textboxes you have to assign a common name or class or indivdual id.

You can't assign same id to all elements.

Here i used name attribute

var myButton = document.getElementsByName('dynamic');
var myInput = document.getElementsByName('viewPass');
myButton.forEach(function(element, index){
  element.onclick = function(){
     'use strict';

      if (myInput[index].type == 'password') {
          myInput[index].setAttribute('type', 'text');
          element.firstChild.textContent = 'Hide';
          element.firstChild.className = "";

      } else {
           myInput[index].setAttribute('type', 'password');
           element.firstChild.textContent = '';
            element.firstChild.className = "glyphicon glyphicon-eye-open";
      }
  }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script>
<td data-title="Password">
<input name="viewPass" type="password" value="abcd" readonly/></td>


<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
<br>
<td data-title="Password">
<input name="viewPass" type="password" value="watha" readonly/></td>

<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
<br>

<td data-title="Password">
<input name="viewPass" type="password" value="xyz" readonly/></td>

<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>

</div>