Имея много кнопок и один div для каждой из них, при нажатии одной кнопки будет показан соответствующий div

Question

Поэтому я хочу, чтобы при нажатии первой кнопки «Распунде» текстовое поле рядом с ним исчезало, прямо сейчас, если я нажимаю первую «Распунде»«Кнопка обоих текстовых полей исчезнет, ​​а не только первая.

$('.comment-reply-button').click(function () {
    $('.add-reply-container').toggle(500);
});

». comment-reply-button »это класс« Raspunde »кнопок« .add-reply-container »это классчто соответствует текстовому полю и кнопке справа от кнопок «Raspunde»

Проблема в том, что раздел комментариев будет масштабироваться, и у меня будет много комментариев, я знаю, как это сделать для 2,3,4 комментариев, ноне для сотен и более.

HTML:

<div class="comment-container">
        <div class="comment-title">
            <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
        </div>
        <div class="comment-text">
            This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to.
            Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems and not one fix.
        </div>
        <div class="comment-bottom">
            <button class="comment-reply-button">Raspunde</button>
        </div>
    </div>
    <div class="add-reply-container">
        <textarea class="add-reply-textbox" placeholder="Scrie o intrebare.." >
        </textarea>
        <button class="add-reply-button">Trimite</button>
    </div>

Answer 1

попробуйте использовать следующий код

$('.comment-reply-button').click(function() {
  $(this).closest(".comment-container").next('.add-reply-container').toggle(500);
});

$(this) // The button you clicked on
.closest(".comment-container") // The closest element of the button with the class comment-container
.next('.add-reply-container') // find the next object with the add-reply-container class

Демо

$('.comment-reply-button').click(function() {
  $(this).closest(".comment-container").next('.add-reply-container').toggle(500);
});

.add-reply-container {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-container">
  <div class="comment-title">
    <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
  </div>
  <div class="comment-text">
    This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to. Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems
    and not one fix.
  </div>
  <div class="comment-bottom">
    <button class="comment-reply-button">Raspunde</button>
  </div>
</div>
<div class="add-reply-container">
  <textarea class="add-reply-textbox" placeholder="Scrie o intrebare..">
        </textarea>
  <button class="add-reply-button">Trimite</button>
</div>

<br>

<div class="comment-container">
  <div class="comment-title">
    <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
  </div>
  <div class="comment-text">
    This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to. Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems
    and not one fix.
  </div>
  <div class="comment-bottom">
    <button class="comment-reply-button">Raspunde</button>
  </div>
</div>
<div class="add-reply-container">
  <textarea class="add-reply-textbox" placeholder="Scrie o intrebare..">
        </textarea>
  <button class="add-reply-button">Trimite</button>
</div>