jQuery的fadeToggle（）选择的元素多于所需的元素

Question

  $(document).ready(function(event) {
    $(".reply-btn").click(function() {
      $(".section-row-reply").closest(".section-row-reply").fadeToggle();
    });
  });

我有一个 for循环，它会生成以下内容：

• 评论
• 回复
• 回复表格。

---

我希望jquery函数fadeToggle（）在单击回复按钮时显示每个评论的回复形式

<!-- jquery 2.2.4 -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- bootstrap 3.3.7 -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>

<!-- post comments -->
<div class="section-row">
  <div class="section-title">
    <h3 class="title">{{ comments.count }} Comment{{ comments|pluralize }}</h3>
  </div>
  <div class="post-comments">

    {% for comment in comments %} 
    {% if comment %} 
    <!-- comment -->
    <div class="media">
      <div class="media-left">
        <img class="media-object" src="{{ comment.profile_picture.url }}" alt="">
      </div>
      <div class="media-body">
        <div class="media-heading">
          <h4>{{ comment.user }}</h4>
          <span class="time">{{ comment.timestamp }}</span>
        </div>

        <p>{{ comment.content }}</p>

        <div class="rely-button">
          <button type="button" name="button" class="reply-btn btn btn-outline-dark btn-sm" id="reply-button">Reply</button>
        </div>
        <br>

        <!-- display replies to the comment -->

        {# reply per comment #}
        
        {# all replies to comments will be shown below the comment #} 
        
        {% if comment.replies %} 
        {% for reply in comment.replies.all %}
        <div class="media-replies pull-right">
          <div class="media-left">
            <img class="media-object" src="{{ reply.profile_picture.url }}" alt="">
          </div>
          <div class="media-body">
            <div class="media-heading">
              <h4>{{ reply.user }}</h4>
              <span class="time">{{ reply.timestamp }}</span>
            </div>
            <p>{{ reply.content }}</p>
          </div>
        </div>
        {% endfor %} {# endfor comment.replies #} 
        {% endif %} {# endif comment.replies #}

        <!-- /display replies to parent comment -->


        {# after replies have been shown, we can have the reply-comment-form #} 
        {% if user.is_authenticated %}
        <!-- post reply -->
        <div class="section-row-reply pull-right" style="display:none" id="show-reply-form">
          <form class="post-reply" method="post">
            {% csrf_token %}
            <input type="hidden" name="comment_id" value="{{ comment.id }}">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <textarea class="input" name="content" placeholder="Reply here..."></textarea>
                </div>
              </div>
              <div class="col-md-12">
                <button class="primary-button" value="submit" type="submit">Reply</button>
              </div>

              <!-- form_errors -->
              {{ comment_form.errors }}
            </div>
          </form>
        </div>
        <!-- /post reply -->
        {% endif %} {# endif user.is_authenticated #} 
        {# comments are display in the manner above in the div section #}
      </div>
    </div>
    {% endif %} {# endif comment #}
    {% endfor %} {# endfor comment in comments #}
  </div>
</div>
<!-- /post comments -->

这是一个由django支持的网站，因此{％％}，{＃＃}和{{}}位于html层。该功能有效，但不完全正确。单击任何答复按钮（以显示答复表单）时，将显示其他评论的其他答复表单。

**想法是使每个评论的回复按钮仅显示该评论的回复表单。任何帮助将不胜感激。我怀疑我在jquery层选择的元素。 **

所有css都是自举程序3.3.7的