How to use show/Hide inside a PHP foreach?

Question

When using the script below it masks only the first line (if I filter or fetch it even changes what is first, but masks only the first from above). Someone can help me?

HTML:

@foreach($senhas as $key => $value)
<tr>
<td>
 <form>
  <div class="form-group">
   <input id="password-field" type="password" class="form-control" name="password" value="{{ $value->senha }}">
   <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
  </div>
 </form>
</td>
</tr>
@endforeach

SCRIPT:

<script type="text/javascript">
$(".toggle-password").click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});
</script>

Answer 1

You are repeating the id="password-field" in various inputs. With this the code considers only the first one you find. Remember that the same id cannot be repeated on the same page, it must be unique.

A solution is to search for the element before the icon with .prev(), which is the input. Then you don’t even need to use id nor the attribute toggle how you’re doing. And you don’t need to tag <form> since it has no utility by the code shown.

See how it would look:

$(".toggle-password").click(function() {
  var $this = $(this);
  $this.toggleClass("fa-eye fa-eye-slash");
  var input = $(this).prev();
  if (input.attr("type") == "password") {
    input.attr("type", "text");
    setTimeout(function(){
       input.attr("type", "password");
       $this.toggleClass("fa-eye fa-eye-slash");
    }, 2000);
  } else {
    input.attr("type", "password");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<table>
   <tr>
      <td> 
           <div class="form-group">
               <input type="password" class="form-control" name="password" value="{{ $value->senha }}">
               <span class="fa fa-fw fa-eye field-icon toggle-password"></span>            
           </div>
      </td>
   </tr>
   <tr>
      <td> 
           <div class="form-group">
               <input type="password" class="form-control" name="password" value="{{ $value->senha }}">
               <span class="fa fa-fw fa-eye field-icon toggle-password"></span>            
           </div>
      </td>
   </tr>
</table>