title: Ajax calls problems
body: <p>I have 2 ajax calls, 1 for create and 1 for delete a folder, here is the source code</p>
  
  <pre><code>&lt;!-- Create folder ajax --&gt;
  &lt;script&gt;
      $(document).ready(function() {
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('input[name="_token"]').val()
              }
          });
  
          $('#create-folder').click(function(e) {
              e.preventDefault();
  
             $.ajax({
                 data: $('#create-folder-form').serialize(),
                 url: "{{ route('folders.store') }}",
                 type: "POST",
                 dataType: "json",
  
                 success: function (data) {
  
                     if(data.errors) {
                         alert('Sorry');
                     } else {
                         $('#create-folder-form').trigger("reset");
                         $('#exampleModal').modal('hide');
  
                         $('.folders').append('&lt;li data-id=' + data.id + '&gt;' + data.name + " &lt;button type='button' class='btn btn-danger delete-folder' data-toggle='modal' data-id='" + data.id + "'&gt; Delete " +  "&lt;/button&gt;" + '&lt;/li&gt;');
                     }
  
                 },
  
                 error: function (data) {
                      console.log('Error ' + data);
                 }
             })
          });
  
          // Delete ajax call
          $('.delete-folder').click(function(e) {
  
              let id = ($(this).data('id'));
  
              $.ajax({
                  type: 'delete',
                  url: "folders/" + id,
  
                  success: function(data) {
                      $('.folders li[data-id=' + data.id + ']').remove();
                  }
  
              });
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>index.blade.php</p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
      &lt;div class="container"&gt;
  
          @include('partials.nav')
  
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Folders&lt;/div&gt;
  
                      &lt;div class="card-body"&gt;
                          &lt;!-- Button trigger modal --&gt;
                          &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"&gt;
                              Create folder
                          &lt;/button&gt;
  
                          &lt;!-- Modal --&gt;
                          &lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
                              &lt;div class="modal-dialog" role="document"&gt;
                                  &lt;div class="modal-content"&gt;
                                      &lt;div class="modal-header"&gt;
                                          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Create&lt;/h5&gt;
                                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                                              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                                          &lt;/button&gt;
                                      &lt;/div&gt;
                                      &lt;div class="modal-body"&gt;
                                          &lt;form id="create-folder-form"&gt;
                                              @csrf
  
                                              &lt;div class="form-group"&gt;
                                                  &lt;label for="name"&gt;Name&lt;/label&gt;
                                                  &lt;input type="text" class="form-control" name="name" id="name"&gt;
                                              &lt;/div&gt;
  
                                              &lt;div class="form-group"&gt;
                                                  &lt;button type="button" class="btn btn-primary" id="create-folder"&gt;Create&lt;/button&gt;
                                              &lt;/div&gt;
  
                                          &lt;/form&gt;
                                      &lt;/div&gt;
                                      &lt;div class="modal-footer"&gt;
                                          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row justify-content-center mt-3"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Folders&lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          @if($folders)
                              &lt;ul class="folders"&gt;
                                  @foreach($folders as $folder)
                                      &lt;li data-id="{{ $folder-&gt;id }}"&gt;
                                          {{ $folder-&gt;name }}
  
                                          &lt;button type='button' class='btn btn-danger delete-folder' data-toggle='modal' data-id='{{ $folder-&gt;id }}'&gt;Delete&lt;/button&gt;
                                      &lt;/li&gt;
                                  @endforeach
                              &lt;/ul&gt;
                          @endif
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  @endsection
  
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public function index()
      {
          $user = User::findOrFail(Auth::id());
  
          $folders = $user-&gt;folders()-&gt;get();
  
          return view('folders.index', compact('folders'));
      }
  
      public function store(Request $request)
      {
          $attributes = $request-&gt;validate([
              'name' =&gt; 'required'
          ]);
  
          $attributes['user_id'] = Auth::id();
  
          $folder = Folder::create($attributes);
  
          return Response::json($folder);
      }
  
      public function destroy(Folder $folder)
      {
          $folder-&gt;delete();
  
          return Response::json($folder);
      }
  </code></pre>
  
  <p>Everything works well, it adds me the element to the DOM, but there is a little problem, when I am trying to delete a folder after i create it, it does not work, I need to refresh my page and then it is working.</p>