Ajax Error Message cannot Display in bootstrap modal in Laravel Blade - development

Ajax Error Message cannot Display in bootstrap modal in Laravel Blade

I am trying to insert ‘section’ value into ‘class_sections’ table using ajax with bootstrap modal. Data is inserting successfully and I am getting return response if success or error.Now, the problem is errors or success message is not showing in the modal. Where in I am doing false, would someone help me, please?
My index.blade.php is-

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#sectionModal" data-whatever="@fat">+New Section</button>
   <div class="modal fade" id="sectionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title" id="exampleModalLabel1">New Section</h4>
           </div>
           <form id="AddNewSection" method="POST">
              
           <div class="modal-body">
              <div id="success-msg" class="hide">
                 <div class="alert alert-info alert-dismissible fade in" role="alert">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                 <strong>Success!</strong> You Created New Section!!
                 </div>
              </div>
              <div class="form-group">
                 <input type="text" name="section" value="" class="form-control" placeholder="Section Name">
                  <span class="text-danger">
                     <small id="section-error"></small>
                  </span>
              </div>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             <button type="submit" class="btn btn-primary">Save section</button>
          </div>
        </form>
      </div></div></div>

Ajax:

<script type="text/javascript">
$('body').on('click', '#AddNewSection', function(){
    var sectionForm = $("#AddNewSection");
    var formData = sectionForm.serialize();
    $( '#section-error' ).html( "" );

    $.ajax({
        url:'admin/class-section/store',
        type:'POST',
        data:formData,
        success:function(data) {
           // console.log(data);
            if(data.errors) {
                if(data.errors.section){
                    $( '#section-error' ).html( data.errors.section[0] );
                }

            }
            if(data.success) {
                $('#success-msg').removeClass('hide');
                setInterval(function(){ 
                    $('#sectionModal').modal('hide');
                    $('#success-msg').addClass('hide');
                }, 3000);
            }
        },
    });
});</script>

ClassSectionController.php

public function store(Request $request)
{
  $validator = Validator::make($request->all(), [
                'section' => 'required|max:255|unique:class_sections',
            ]);

  $input = $request->all();

  if ($validator->passes()) {

       // Store section in database
       $data = new ClassSection;
       $data->section = $request->section;
       $data->save();

       return response()->json($data);

      }

  return Response::json(['errors' => $validator->errors()]);
}

from Laravel Questions and Answers https://laravelquestions.com/laravel/ajax-error-message-cannot-display-in-bootstrap-modal-in-laravel-blade/
via Lzo Media