I want to show the password on click the button in django

Question

In django ,I want to show the password on click the button but It is working for only one field .I want to show the password on clicking the relative button Here is my template code

{% if passwords %}



<div class="body">
        <div class="origin">

                <input type="number" name="noofpwds" value={{no}} disabled hidden>
                <table  class="table table-borderless" id="tab"><h1>your passwords </h1>



                    <div class="parent">

                    {% for pwd in passwords %}

  <div>
    <input type="text" class="span"value={{pwd.field}} readonly>
      <input type="password" placeholder="type old password" value={{pwd.pwd}} id="pwd" class="input" required>
    <button class="btn btn-primary" onclick="showHide()" id="btn">show</button>
  </div>
                        <script>

                        function showHide()
                        {
                        var showText=document.getElementById("btn");
                        var input=document.getElementById("pwd");
                        if (input.getAttribute("type") === "password") {
                            input.setAttribute("type", "text");
                            showText.innerText = "hide";
                          } else {
                            input.setAttribute("type", "password");
                            showText.innerText = "show";
                          }
                          }
                        </script>
                        {% endfor %}
                    </div>

                <tr class="submit-btn">
                        <td >
                            <a href="{% url 'updatepwd' %}" ><button class="btn btn-primary"  type="submit">update password</button></a>
                        </td>

                    </tr>
            </table>

            {{passwords.pwd}}

        </div>


    </div>



{% endif %}

All buttons are working for only one field

I want to show the password on clicking the respective button

Answer 1

All your IDs are the same value: "pwd" or "btn"

IDs should be unique so your code knows which element you're referring to.

The easiest way to make an element unique inside a for loop is to add a number via {{forloop.counter}}

Try something like this:

<script>
//Abstract the function so that you only need to include it once outside of the forloop and add arguments for pwdID and btnID
function showHide(pwdId, btnId)
{
    var showText=document.getElementById(btnId);
    var input=document.getElementById(pwdId);
    if (input.getAttribute("type") === "password") {
        input.setAttribute("type", "text");
        showText.innerText = "hide";
    } else {
        input.setAttribute("type", "password");
        showText.innerText = "show";
    }
}
</script>


{% for pwd in passwords %}
<!-- add {{forloop.counter}} to ID attributes so they are unique -->
<div>
<input type="text" class="span" value={{pwd.field}} readonly>
  <input 
      type="password" 
      id="pwd{{forloop.counter}}" 
      placeholder="type old password" 
      value="{{pwd.pwd}}"           
      class="input" 
      required>
<button 
      class="btn btn-primary"
      onclick="showHide('pwd{{forloop.counter}}', 'btn{{forloop.counter}}')" 
      id="btn{{forloop.counter}}">show</button>
</div>
{% endfor %}