CODEWITHSUNDEEP
htmljqueryforeach
Hi_TecH
Hi_TecH

Reputation: 427

How to show only clicked element in foreach loop via jquery

I have foreach with many comments. Each of them has a button to add a subcomment. When I try to do something like this:

$(document).ready(function(){
  $('.addsubcomment').click(function(e){
    e.preventDefault();
  $('.hideform').addClass('customflex').removeClass('hideform');
  $('.addsubcomment').hide();
});
});

The comment form for each item opens, but I only need the current one. How can this be done?(I don't use show because the form has display: flex;).

<ul class="comments">
   @foreach($specpost as $comments)
   @foreach($comments->comments->sortByDesc('id') as $comment)
   <li class="clearfix">
      @if($comment->parent_id === 0)
      <img src="https://bootdey.com/img/Content/user_1.jpg" class="avatar">
      <div class="post-comments">
         <p class="meta customflex justify-content-between"><a href="#">{{ $comments->user->name }}</a><span>{{ $comments->user->created_at }}</span></p>
         <p>
            {{ $comment->content }}
         </p>
         @if(Auth::check())
         @if(Auth::user()->id === $comment->user_id)
         <div class="customflex justify-content-end">
            <a class="addsubcomment text-primary" href="#">Add comment</a>//!!!!!!Here user clicks add comment button!!!!!!!!!
            <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
            <form class="deletecommform ml-5" action="{{ route('comment.destroy', ['comment' => $comment->id]) }}" method="POST">
               @method('DELETE')
               @csrf
               <a class="deletecommbtn text-danger" href="#">Delete comment</a>
            </form>
         </div>
         @endif
         @endif
      </div>
      @endif
      @foreach($comment->replies as $subcomment)
      <ul class="comments">
         <li class="clearfix">
            <img src="https://bootdey.com/img/Content/user_3.jpg" class="avatar">
            <div class="post-comments">
               <p class="meta customflex justify-content-between"><a href="#">{{ $comments->user->name }}</a><span>{{ $comments->user->created_at }}</span></p>
               <p>
                  {{ $subcomment->content }}
               </p>
               @if(Auth::check())
               @if(Auth::user()->id === $comment->user_id)
               <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="{{ route('comment.destroy', ['comment' => $comment->id]) }}" method="POST">
                     @method('DELETE')
                     @csrf
                     <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
               </div>
               @endif
               @endif
            </div>
         </li>
      </ul>
   </li>
   @endforeach
   <form method="POST" class="w-100" action="{{ route('comment.store') }}">
      @csrf
      <div class="hideform replyform mb-3">// !!!!!!!This is a form where users can write their comments!!!!!
         <input type="hidden" name="post_id" value="{{ $comment->post->id }}">
         <input type="hidden" name="parent_id" value="{{ $comment->id }}">
         <input class="d-block ml-auto w-50" type="text" name="content" required>
         <button type="submit" class="offset replysub fas fa-paper-plane ml-1"></button>
      </div>
   </form>
   @endforeach
   @endforeach
</ul>

JSfiddle: https://jsfiddle.net/qwe123wq/9mfdg14r/18/ If you need to clarify something else, let me know. Thanks!

Upvotes: 1

Views: 471

Answers (1)

Swati
Swati

Reputation: 28522

You can use closest("li").nextAll('form:first').find('.hideform') to get your form div then add class there .

Demo Code :

$(document).ready(function() {
  $('.addsubcomment').click(function(e) {
    e.preventDefault();
    //get closest li > next all find first form
    $(this).closest("li").nextAll('form:first').find('.hideform').addClass('customflex').removeClass('hideform');
    //$(this).hide();//if you need to hide button  which is clicked
  });
});
.customflex {
  display: block
}

.hideform {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Start Comments  -->
<div class="bootstrap snippets bootdey">
  <div class="row">
    <div class="col-md-12">
      <div class="blog-comment">
        <hr>
        <ul class="comments">
          <li class="clearfix">
            <img src="" class="avatar">
            <div class="post-comments">
              <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
              <p>
                ewrwe
              </p>
              <div class="customflex justify-content-end">
                <a class="addsubcomment text-primary" href="#">Add comment</a>
                <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
                  <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                </form>
              </div>
            </div>
            <ul class="comments">
              <li class="clearfix">
                <img src="" class="avatar">
                <div class="post-comments">
                  <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                  <p>
                    ewrew
                  </p>
                  <div class="customflex justify-content-end">
                    <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                    <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
                      <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                    </form>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  dsf
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  dsfsd
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  werwe
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <form method="POST" class="w-100" action="http://127.0.0.1:8000/user/comment">
            <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd">
            <div class="hideform replyform mb-3">
              <input type="hidden" name="post_id" value="9">
              <input type="hidden" name="parent_id" value="63">
              <textarea class="d-block ml-auto w-50" type="text" name="content" rows="3" required=""></textarea>
              <button type="submit" class="offset replysub fas fa-paper-plane ml-1"></button>
            </div>
          </form>
          <li class="clearfix">
            <img src="" class="avatar">
            <div class="post-comments">
              <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
              <p>
                sdfsdf
              </p>
              <div class="customflex justify-content-end">
                <a class="addsubcomment text-primary" href="#">Add comment</a>
                <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                  <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                </form>
              </div>
            </div>
            <ul class="comments">
              <li class="clearfix">
                <img src="" class="avatar">
                <div class="post-comments">
                  <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                  <p>
                    sdfsdf
                  </p>
                  <div class="customflex justify-content-end">
                    <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                    <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                      <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                    </form>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  dsf
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  ewre
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  sdfsd
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  чего так
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  JohnDoe , эй
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <ul class="comments">
            <li class="clearfix">
              <img src="" class="avatar">
              <div class="post-comments">
                <p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
                <p>
                  sssssssssssssssssssssssss
                </p>
                <div class="customflex justify-content-end">
                  <a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
                  <form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
                    <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
                  </form>
                </div>
              </div>
            </li>
          </ul>
          <form method="POST" class="w-100" action="http://127.0.0.1:8000/user/comment">
            <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd">
            <div class="hideform replyform mb-3">
              <input type="hidden" name="post_id" value="9">
              <input type="hidden" name="parent_id" value="59">
              <textarea class="d-block ml-auto w-50" type="text" name="content" rows="3" required=""></textarea>
              <button type="submit" class="offset replysub fas fa-paper-plane ml-1"></button>
            </div>
          </form>
        </ul>
      </div>
    </div>
  </div>
</div>
<!--End Comments -->

Upvotes: 2

Related Questions