How to implement ajax in main comments and replies with commen and replies nesting

@tykus do you have Instagram? because I don't think I can paste the code here !

@CODE-AXION but you can post code on Instagram? This is a first!?!?

Wrap your code snippets with ```

```
// your code
```

@tykus sorry for the late response because we have differenet time zone the ajax code on the single.blade.php

<div class="comment_container">

    <div class="main_comment--container">
      <form method="POST" id="form" action="/youtube_dev/stocktest/public/comments/index/{{$post->id}}" >
        @csrf
        <div class="form-group">
          <input type="hidden" name="post_id" id="post_id" value="{{$post->id}}" class="form-control" id="exampleFormControlInput1">
        </div>
        <input type="hidden" name="user_id" id="user_id" value="{{Auth::guard('web')->user()->id}}">
        <div class="form-group">
            <input type="hidden" name="parent_id" id="parent_id"  class="form-control" id="exampleFormControlInput1">
          </div>
        <div class="form-group">
          <label for="exampleFormControlTextarea1" style="color: rgb(0, 0, 0)">Enter Your Comment</label>
          <textarea class="form-control" name="comment" id="comment" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
        <button class="btn btn-primary" id="comment-btn" type="submit" value="submit" class="btn btn-primary mb-2">Add Comment</button>
      </form>
      

    
      @include('partials.comment_replies', ['comments' => $post->comments, 'post_id' => $post->id])

		</div>

</div>






<script>
 
  $.ajaxSetup({
 
   headers:{
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   }
 
  });
 
     $('#comment-btn').click(function(e){
       e.preventDefault();
       var post_id = $('#post_id').val();
       var user_id = $('#user_id').val();
       var parent_id = $('#parent_id').val();
       var comment = $('#comment').val();
 
       $.ajax({
 
         type:'POST',
         dataType: 'json',
         data: { 
           post_id:post_id,
           user_id:user_id,
           parent_id:parent_id,
           comment:comment,
           _token:'{{csrf_token()}}'
         },
 
         url: '{{ route('commentAdd', $post->id ) }}',
 
         success:function(data){
           console.log(data)
         
             console.log(data)
 
                     $('.main_comment--container').append(`
                     
                     <div class="main--comment">
                       
                       <strong>  ${data.user.name} </strong>
                       <p> ${data.comment} </p>
                       <form method="POST" action="/youtube_dev/stocktest/public/replies/index/${data.comment.id}" >
                         @csrf
                     
                         <input type="hidden" name="user_id" id="user_id1" value="{{Auth::guard('web')->user()->id}}">
                         <div class="form-group">
                           <input type="hidden" name="post_id" id="post_id1" value"${data.comment.post_id}" class="form-control" id="exampleFormControlInput1">
                         </div>
                         <div class="form-group">
                             <input type="hidden" name="parent_id" id="parent_id1" value="${data.comment.id}" class="form-control" id="exampleFormControlInput1">
                           </div>
                         <div class="form-group">
                           <label for="exampleFormControlTextarea1" style="color: rgb(255, 80, 80)">Enter Your REPLY</label>
                           <textarea class="form-control" name="comment" value="${data.comment}" id="comment1" placeholder="message"  rows="3"></textarea>
                         </div>
                         <button class="btn btn-primary" type="submit" id="btn-reply1" value="submit" class="btn btn-primary mb-2">Add Comment</button>
                       </form>
                     
                     </div>
                         
                       `)
           
         },
         error: function (data) {
           console.log('oh no');
         }
 
       })
 
  })
 
 
  
  $('#btn-reply1').click(function(e){
   e.preventDefault();
   var post_id1 = $('#post_id1').val();
   var user_id1 = $('#user_id1').val();
   var parent_id1 = $('#parent_id1').val();
   var comment1 = $('#comment1').val();
 
   $.ajax({
 
     type:'POST',
     dataType: 'json',
     data: { 
       post_id1:post_id1,
       user_id1:user_id1,
       parent_id1:parent_id1,
       comment1:comment1,
       _token:'{{csrf_token()}}'
     },
 
     url: '{{ route('replyAdd', $comment->id ) }}',
 
     success:function(data){
       console.log(data)
      
         // console.log(data)
           // console.log('data saved');
      
       
     },
     error: function (data) {
       console.log('no');
     }
 
   })
 
  })
 
  
 
 </script>

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;
use App\Models\Comment;

class CommentController extends Controller
{
    
    public function store(Request $request,$post)
    {

 

        if($request->ajax()){

         $comment = Comment::create($request->all());
        $comment = Comment::with('user','replies')->find($comment->id); //to query the relationship of the user //and replies
          
   
           return response()->json($comment);
        }else{
         return back();
 
        
    }

    public function replyStore(Request $request)
    {
        
         if(!$request->ajax()){
						$reply = Comment::create($request->all());

       return response()->json($reply);
        }else{
            
         return back();
         }
      



    }

}

Okay, so now we need to display all the comments and replies code into the partial blade file.

This is because we need to nest the comment replies and how much nesting is required depends upon the user interaction. So we can not predict the nesting levels.

To make it more and more flexible, we need to create partials and then repeat that partial to display the nested comment replies.

First, i created a partials folder inside resources >> views folder, and inside the partials folder, i created one file called comment_replies.blade.php.

<!-- _comment_replies.blade.php -->

@foreach($comments as $comment)
<div class="main--comment">
    <strong>{{ $comment->user->name }}</strong>
    <p>{{ $comment->comment }}</p>
    <a href="" id="reply"></a>
    <button class="btn-reply text-uppercase" id="reply-btn"
              onclick="showReplyForm('{{$comment->id}}','{{$reply->user->name}}')">reply</button
            >
    <div class="comment-list left-padding" id="reply-form-{{$comment->id}}" style="display: none">
    <form method="POST" action="/youtube_dev/stocktest/public/replies/index/{{$comment->id}}" >
        @csrf
    
        <input type="hidden" name="user_id" id="user_id" value="{{Auth::guard('web')->user()->id}}">
        <div class="form-group">
          <input type="hidden" name="post_id" id="post_id" value="{{$post->id}}" class="form-control" id="exampleFormControlInput1">
        </div>
        <div class="form-group">
            <input type="hidden" name="parent_id" id="parent_id" value="{{$comment->id}}" class="form-control" id="exampleFormControlInput1">
          </div>
        <div class="form-group">
          <label for="exampleFormControlTextarea1"  style="color: rgb(255, 80, 80)">Enter Your REPLY</label>
          <textarea class="form-control" name="comment" rows="3"></textarea>
        </div>
        <button class="btn btn-primary" id="btn-reply" type="submit" value="submit" class="btn btn-primary mb-2">Add Comment</button>
      </form>
    </div>
    @include('partials.comment_replies', ['comments' => $comment->replies])
</div>
@endforeach

the whole comment system is working perfectly fine but i want to create comments and replies with AJAX and i dont know how to do it

@tykus hello brother plz help me i have sent you the code here , i seriously have no idea how to implement this