I'm doing a simple to do list in a project with Laravel. Just to explain, when someone add a `task` it only sends to the database the `id` and the `title` of that task. But in the website it shows the the title of the task, a progress bar and a simple checklist where you can add some "sub tasks".

In regular PHP its working fine, but I really liked to convert that to AJAX in order to stop the continuous refresh in the website when someone add a new task.

The code below shows exactly the block that is created when someone add a new a task (`list.blade.php`)

```
<div class="card-body container">
    @if(count($tasks))
    @foreach ($tasks as $task)
    <!-- Task -->
    <div
        <!-- Task Title -->
        <div>
            <h3 id="task-title" class="text-dark small font-weight-bold">{{$task->title}}
                <span class="text-dark float-right">0</span>
            </h3>

            <div class="progress mb-4">
                <div class="progress-bar role="progressbar"></div>
        </div>
    </div>

    <!-- Sub Tasks -->
    <div class="container task">
        @if (count($task->subtasks))
        @foreach ($task->subtasks as $subtask)
        <div class="align-items-center mb-2 task-item">
            <form class="subtask-form-delete" action="{{route('subtasks.destroy', $subtask)}}" method="post">
                <div class="task-checkbox"></div>
                <div class="checkbox-active"><i class="fas fa-check check-item align-middle"></i></div>
                <h4 class="small font-weight-bold task-item-title">{{$subtask->title}}</h4>
                @csrf
                @method('DELETE')
                <button class="d-none d-sm-inline-block btn btn-sm subtask-delete-option" type="submit">
                    <span class="text subtask-single-button">
                        <i class="fas fa-trash-alt"></i>
                    </span>
                </button>
            </form>
            <form class="subtask-update-form" method="POST" action="{{route('subtasks.update', $subtask)}}" enctype="multipart/form-data" autocomplete="off">
                @csrf
                @method('PUT')
                <input type="hidden" name="tasks_id" value="{{$task->id}}">
            </form>
        </div>
        @endforeach
        @else
        <div class="d-sm-flex align-items-center mb-2 task-item-mute">
            <div class="task-checkbox-mute"></div>
            <h4 class="small font-weight-bold task-item-title-mute">Adicione um item</h4>
        </div>
        @endif
    </div>

    <!-- Action Buttons Tasks -->
    <div class="text-right container subTask-buttons">
        <div class="subtask-buttons">
            <form class="subtask-create-form" method="POST" action="{{route('subtasks.store')}}" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <input type="hidden" name="tasks_id" value="{{$task->id}}">
            </form>
        </div>
        <div>
            <button class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm add-subtask-buttons">
                <span class="text">Adicionar Item</span>
            </button>
            <div class="dropdown dropdown-task-options no-arrow">
                <button class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="text subtask-single-button"><i class="fas fa-ellipsis-v"></i></span>
                </button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                    <h6 class="dropdown-header text-center">Opções da tarefa:</h6>
                    <button class="dropdown-item" href="#" data-toggle="modal" data-target="#editTaskModal{{$task->id}}">Editar</button>
                    <button type="submit" class="dropdown-item" data-toggle="modal" data-target="#deleteTaskModal{{$task->id}}">Eliminar Tarefa</button>
                </div>
            </div>
        </div>
    </div>
    @include('backoffice.tasks.partials.delete')
    @include('backoffice.tasks.edit')
    <br>
    <br>
</div>
@endforeach

@else
<h6 style="text-align: center">Sem Tarefas Registadas</h6>
@endif

```

The code below shows the modal that have the form to add a new task (`add.blade.php`)

```
<div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="addTaskModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header align-items-center">
            <h6 class="modal-title text-dark font-weight-bold">Adicionar Tarefa</h6>
            <button type="button" name="button" class="d-none d-sm-inline-block btn btn-sm close-modal-button" data-dismiss="modal">
                <span>
                    <i class="fas fa-times"></i>
                </span>
            </button>
        </div>
        <span class="line"></span>
        <form method="POST" id="form_add" action="{{route('tasks.store')}}" class="form-group" enctype="multipart/form-data" autocomplete="off">
            <div class="modal-body">
                @csrf
                <h4 class="small font-weight-bold text-dark task-title">Título da Tarefa</h4>
                <input class="task-title-input" type="text" name="title" placeholder="Adicione um título" maxlength="150">
            </div>
            <div class="modal-footer">
                <button href="#" id="button_add" class="d-none d-sm-inline-block btn btn-sm btn-success shadow-sm" type="submit">
                    <span class="text">Adicionar</span>
                </button>
                <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-secondary shadow-sm" data-dismiss="modal">
                    <span class="text">Fechar</span>
                </a>
            </div>
        </form>
    </div>
</div>

```

Below you can find the AJAX code that I have done so far.

```
$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $('#button_add').click(function() {
        $.ajax({
            method: 'POST',
            url: "{{route('tasks.store')}}",
            data: {
                title: $("#form_add input[name=title]").val(),
            },
            dataType: 'json',
            success: function(data) {
                $("#addTaskModal").modal('hide');
            }
        });
        return false;
    });
});

```

Finally, my question is, how can I include the block of PHP that contains the `@foreach` to show all tasks in the `success function()` of AJAX in order to print automatically in my page?

Thanks in advance, and I'm really sorry if something isn't good, but I'm relative new to Laravel and AJAX. Thank you so much!