title: jquery: How do I toggle password for 1 input field?
body: <p>Currently I have my HTML below in 2 different areas of our app to toggle classes <code>.icon-eye-open</code> &amp; <code>.icon-eye-close</code> for 2 different input fields. </p>
  
  <p>The issue is when the user clicks on the <code>.icon-eye-close</code> button both input fields get reveled to show passwords when I only need one input field to get revealed.</p>
  
  <p>Side note: The input fields are generated in python.  </p>
  
  <p>What's the best way to execute this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button type="button" class="show-password-toggle icon-eye-close icon-align-confirm"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.show-password-toggle').each(function () {
      var eye = $(this);
      eye.on('click', function() {
          eye.toggleClass("icon-eye-open icon-eye-close");
          eye.siblings("input").each(function () {
              if (eye.hasClass('icon-eye-open')) {
                  $(this).attr('type', 'text');
              }
              else if (eye.hasClass('icon-eye-close')) {
                  $(this).attr('type', 'password');
              }
          });
      });
  });
  </code></pre>
  
  <p>Generated python code:
  <code>&lt;input type="text" name="password2" minlength="6" placeholder="Confirm password" id="id_password2"&gt;</code> <br/>
  and 
  <code>&lt;input type="text" name="password2" minlength="6" placeholder="Confirm password" id="id_password2"&gt;</code></p>
  
  <p>Thanks</p>