脆皮表单创建具有其他表单 ID 的字段

问：

我正在尝试将一些JS添加到我的密码字段中，因此我需要其ID。我收到错误：如果我使用 inspect 查看 HTML，这是有道理的。有 2 个相同的密码字段，但在我的表单中，我只向其中一个添加了 ID。 形式：

class CustomUserSignUpForm(UserCreationForm):
    email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Enter email'}))
    password1 = forms.CharField(label='Password', widget=forms.PasswordInput(attrs={'placeholder': 'Enter password', 'id': 'password-input'}))
     
    
class CustomUserLogInForm(forms.Form):
    email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Enter email'}))
    password1 = forms.CharField(label='Password', widget=forms.PasswordInput(attrs={'placeholder': 'Enter password'}))

HTML格式：

<!-- LOG IN FORM -->
  <div class="form-group log-in-form" id="log-in-form">
    <button type="button" class="btn-close" id="close-log-in" aria-label="Close"></button>
    <form method="POST" action="">
      {% csrf_token %}
      <h1>Log in</h1>
      {{ form.email|as_crispy_field }}
      {{ form.password1|as_crispy_field }}
      <input type="checkbox" name="remember">Remember me<br>
      <button type="submit" class="btn log-in-btn" id="log-in-btn">Log in</button>
      <p>Forgot password? <a href="#">Reset</a></p>
    </form>
    <a href="{% url 'sign_up' %}" class="btn sign-up-btn">Sign up</a>
  </div>

  {% block content %}

  {% endblock %}

其他HTML（不同的视图，但我继承了模板）：

{% block content %}

<div class="form-group sign-up-form container-fluid">
  <form method="POST" action="">
    {% csrf_token %}
    <h1>Sign up</h1>
    {{ form.email|as_crispy_field }}  
    {{ form.password1|as_crispy_field }}
    <input type="checkbox" id="show-password">Show Password<br>
    {{ form.nick|as_crispy_field }}
    <p id="sign-up-requirements">Password too short</p>
    <button type="submit" class="btn log-in-btn">Sign up</button>
    * required field
  </form>
</div>

{% endblock %}

现在我通过使用

getElementsByClassName('...')[1]

但这是愚蠢的解决方案，我不喜欢它。