Ajax form submit with rich text box without page reload

Hello Everyone please I’m having a problem with my ajax form submit. When I use a rich textbox to submit my form I have to click on the submit button twice before the request sends. Please guys I seriously need help. I want that immediately I press the submit button once the form should submit immediately.
Here is my code :

<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

                    <div id="comments">
                        <h5>Comments</h5>
                        <hr style="margin: 15px 0;">
                        <form action="javascript:void(0)" name="comment-form" id="comment-form" method="post">
                            @csrf
                            <textarea id="mytextarea" class="form-control" name="comment" placeholder="Write your Comments Here"></textarea>
                            <small class="text-danger"><strong>Should not exceed 255 characters</strong></small>
                            <input type="hidden" name="banner_id" value="{{$banner->id}}">
                            <input type="hidden" name="user_id" value="{{$usercom}}">
                            <br>
                            <button type="submit" class="btn btn-success btn-sm">Post Comment</button>
                          </form>
                          <div id="comment-loading">
                              <small><b>Please wait</b></small>
                             <img src="{{asset('load-img/loader.gif')}}" alt="" width="50px">
                          </div>
                          <br>

                        <div class="fb-comments" data-href="#" data-width="100%" data-numposts="10" id="div2">
                            <h5 style="margin-left: 10px">{{$banner->comments}} Comments</h5>
                            <hr>
                            <ul class="element" data-config='{ "type": "list", "limit": 5, "element": "li", "more": "↓ show more", "less": "↑ show less", "number": true }' style="list-style-type: none; padding-inline-start: 10px !important;">
                           @forelse ($comments as $comment)
                           <li>
                           <p class="text-success" style="line-height: 1em;"><b>{{$comment->user->username ?? 'Unknown'}}</b></p>
                           <span style="font-size: 14px;">{!!$comment->comment!!}</span>
                        </li>
                           @empty
                               No Comment has been made yet.
                           @endforelse
                        </ul>
                        </div>
                    </div>

<script src="{{asset('js/jquery.min.js')}}"></script>
<script src="{{asset('js/jquery.validate.min.js')}}"></script>
<script>
        if ($("#comment-form").length > 0) {
            $("#comment-form").validate({
                rules: {
      banner_id: {
        required: true,
        maxlength: 11
      },
      comment: {
        required: true,
        maxlength: 255
      },
    },
    messages: {
        banner_id: {
            required: "<small class='text-danger'>Banner Id Required</small>",
        maxlength: "<small class='text-danger'>Your banner id maxlength should be 11 characters long.</small>"
      }, 
      comment: {
            required: "<small class='text-danger'>Comment is Required</small>",
        maxlength: "<small class='text-danger'>Your comment maxlength should be 255 characters long.</small>"
      }, 
    },
         submitHandler: function(form) {
             $.ajaxSetup({
             headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
            });
            $('#comment-loading').show();
             $.ajax({
               url: "{{url('postcomment')}}",
               type: "POST",
               data: $('#comment-form').serialize(),
               success: function( response ) {
                $('#comment-loading').hide();
                document.getElementById("comment-form").reset();     
                   $("#div").load(" #div > *");
                   $("#div2").load(" #div2 > *");             
               }
             });
            }
        })
    }
    </script>

<script>
    tinymce.init({
      selector: "#mytextarea",
      plugins: "emoticons",
      toolbar: "emoticons",
      toolbar_location: "bottom",
      menubar: false
    });
  </script>
<script>
    $(function () {
        $('#comment-loading').hide();
    });
</script>

PLease I seriously need your assistance here. Thanks In advance.