Q:

How to View and Hide Password for all rows of the table

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';
      }
  };

A:

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>

