как применить css только к тому элементу рядом с кнопкой, которую я нажал в цикле

Question

Это мой HTML код, это все внутри al oop:

$(".edit1_hidden").on("click", function(){
  $(this).css("display","none");
  $("button + .edit_hidden").show();
});

.edit_hidden{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="edit1_hidden inline btn btn-sm btn-warning ">edit</button>
<form class="edit_hidden"
action="/hotels/<%=hotels._id%>/comments/<%=comment._id%>/edit?_method=PUT" method="POST">
  <div class="form-group">
    <input type="text" name="comments[author]" value="<%=comment.author%>">
  </div>
  <div class="form-group">
    <textarea rows="5" cols="100" name="comments[text]"><%=comment.text%></textarea>
  </div>
  <div class="form-group">
    <input class="btn btn-primary btn-sm" type="submit" value="edit">
  </div>
</form>

Проблема заключается в том, что когда я нажимаю кнопку "Изменить", кнопка редактирования скрывается, но CSS применяется ко всем формам, смежным с этой кнопкой. Мне просто нужно применить css только к тому элементу, который находится рядом с кнопкой редактирования, которую я нажимаю.

Answer 1

Вы можете использовать $(this).next(".edit_hidden").show()

$(".edit1_hidden").on("click", function() {
  $(this).css("display", "none");
  $(this).next(".edit_hidden").show();
});

Это покажет форму, которая находится после нажатия кнопки.

Демо

$(".edit1_hidden").on("click", function() {
  $(this).css("display", "none");
  $(this).next(".edit_hidden").show();
});

.edit_hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="edit1_hidden inline btn btn-sm btn-warning ">edit</button>
<form class="edit_hidden" action="/hotels/<%=hotels._id%>/comments/<%=comment._id%>/edit?_method=PUT" method="POST">
  <div class="form-group">
    <input type="text" name="comments[author]" value="<%=comment.author%>">
  </div>
  <div class="form-group">
    <textarea rows="5" cols="100" name="comments[text]"><%=comment.text%></textarea>
  </div>
  <div class="form-group">
    <input class="btn btn-primary btn-sm" type="submit" value="edit">
  </div>
</form>
<button class="edit1_hidden inline btn btn-sm btn-warning ">edit</button>
<form class="edit_hidden" action="/hotels/<%=hotels._id%>/comments/<%=comment._id%>/edit?_method=PUT" method="POST">
  <div class="form-group">
    <input type="text" name="comments[author]" value="<%=comment.author%>">
  </div>
  <div class="form-group">
    <textarea rows="5" cols="100" name="comments[text]"><%=comment.text%></textarea>
  </div>
  <div class="form-group">
    <input class="btn btn-primary btn-sm" type="submit" value="edit">
  </div>
</form>