Input password show and hide

I hope I don’t bother you with a question 🙂 . I have little knowledge about writing code, so I encountered an error there are two inputs I added an eye icon with bootstrap when clicked, the password appears the first input works, but the second input does not show the password What do you think is the problem. sorry about my bad English.

<form method="post" id="your_form_id" enctype="index.php">
<div class="input-container">
<input type="password" name="password" placeholder="Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
<script>
const visibilityToggle = document.querySelector('.visibility');

const input = document.querySelector('.input-container input');

var password = true;

visibilityToggle.addEventListener('click', function() {
  if (password) {
    input.setAttribute('type', 'text');
    visibilityToggle.innerHTML = 'visibility';
  } else {
    input.setAttribute('type', 'password');
    visibilityToggle.innerHTML = 'visibility_off';
  }
  password = !password;
  
});
</script>

<input type="email" name="mail" id="mail" placeholder="Mail Address" required="on"><br><br>
    
<div class="input-container">
    <input type="password" name="mailspword" placeholder="Mail Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
<script>
const visibilityToggle = document.querySelector('.visibility');

const input = document.querySelector('.input-container input');

var password = true;

visibilityToggle.addEventListener('click', function() {
  if (password) {
    input.setAttribute('type', 'text');
    visibilityToggle.innerHTML = 'visibility';
  } else {
    input.setAttribute('type', 'password');
    visibilityToggle.innerHTML = 'visibility_off';
  }
  password = !password;
  
});
</script>

Answer

document.querySelector is going to return the first element in your page. So, your logic works fine with the first input but not in the second input as document.querySelector is still going to return the first element.

You can use document.querySelectorAll and then use indexing to access you input as below-

const visibilityToggle1 = document.querySelectorAll('.visibility')[0];

const input1 = document.querySelectorAll('.input-container input')[0];

var password1 = true;

visibilityToggle1.addEventListener('click', function() {
  if (password1) {
    input1.setAttribute('type', 'text');
    visibilityToggle1.innerHTML = 'visibility';
  } else {
    input1.setAttribute('type', 'password');
    visibilityToggle1.innerHTML = 'visibility_off';
  }
  password1 = !password1;
  
});

const visibilityToggle2 = document.querySelectorAll('.visibility')[1];

const input2 = document.querySelectorAll('.input-container input')[1];

var password2 = true;

visibilityToggle2.addEventListener('click', function() {
  if (password2) {
    input2.setAttribute('type', 'text');
    visibilityToggle2.innerHTML = 'visibility';
  } else {
    input2.setAttribute('type', 'password');
    visibilityToggle2.innerHTML = 'visibility_off';
  }
  password2 = !password2;
});

<form method="post" id="your_form_id" enctype="index.php">
  <div class="input-container">
    <input type="password" name="password" placeholder="Password" required="on"><br><br>
    <i class="material-icons visibility">visibility_off</i>
  </div>

  <input type="email" name="mail" id="mail" placeholder="Mail Address" required="on"><br><br>
    
  <div class="input-container">
    <input type="password" name="mailspword" placeholder="Mail Password" required="on"><br><br>
    <i class="material-icons visibility">visibility_off</i>
  </div>
</form>

I have edited your code because of multiple variables with same name. I have appended 1 to the variables for first input and 2 to variables for second input.

As mentioned in one of the comments, I have duplicated the event listeners here for both inputs just for demonstration purpose, but you can attach the same event listener to both inputs with looping and providing a custom argument to the event listener.