how to apply css to only that element next to then button i clicked in a loop

user_12116136 0
Viewed 50

This is my HTML code this are all inside a loop :

$(".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>

The problem is when ever I click on edit that edit button hides but CSS is applied to every form adjacent to that button I don't need that I just want to apply css to only that element which is adjacent to the edit button which I click.

css html jquery
1 Answers

You can use $(this).next(".edit_hidden").show()

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

This will show the form that is after the button your clicked.

Demo

$(".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>

user_29432180
Related