Laravel Delete按钮无法使用Ajax调用

Question

I have a Laravel post application where I create and display posts. I am now trying to delete a post using an Ajax call. Let's say I have 10 posts displaying. When I click on the delete button of the first post, I get a 405 Method Not Allowed error. When I click on the delete button on any of the posts below, absolutely nothing happens, no error or warning message. Please take note that my CSRF tokens are set up and working. Any help or suggestions will be appreciated.

Here is the HTML:

    @foreach($posts as $post)
    <div class="postContainer" id="post{{ $post->id }}">
      <h4 class="postHeading" id="showtitle">{{ $post->title }}</h4>
      <p class="post" id="postBody">{{ $post->post }}</p>
      <span class="authorName" id="showauthor">{{ $post->author }}</span>
      <span class="postDate" id="showpostDate">{{ $post->created_at }}</span>
      <input type="submit" name="delete" id="delete" value="Delete" data-id="{{ $post->id }}">
    </div>
    @endforeach
    <div class="message" id="message">

    </div>

Here is my Ajax call:

    $("#delete").on("click", function(){

      var id = $(this).attr('data-id');

      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
        }
      });

      $.ajax({
        url: '/index/delete/' + id,
        type: "POST",
        data: {_method: 'delete'},
        success:function(response){
          $("#message").append("<div>" + response.message + "</div>");
        },
      });

    });

Here is my Route:

   Route::post('/index/delete/{id}', 'HomeController@delete');

Here is my controller:

public function delete($id){
  Post::find($id)->delete();
  return redirect('/');
}