كيفية إظهار سجل مضاف جديد في الجدول باستخدام Ajax بدون تحديث الصفحة في Laravel

أستخدم Laravel 9 لتطوير قائمة مهام باستخدم Ajax, حاولت إنشاء مهمة جديدة مع طلب post ajax:

$('#AddButton').click(function(event){
        var text = $('#addItem').val();
        $.post('tasks-list-add', {'text': text, '_token': $('input[name=_token]').val()}, function(data){
          
         });
});

ولكن المشكلة الآن هي أنها لا تعمل على الإطلاق ولا تقوم بتحديث الصفحة بعد الإرسال لإظهار السجل المضاف الجديد على الجدول. فكيف يمكنني حل هذه المشكلة؟ كود TaskListController

class TaskListController extends Controller
{
    public function index()
    {
        $tasks = Tasklist::all();
        return view('admin.tasks.list',compact('tasks'));
    }
    
    public function create(request $request)
    {
        $item = new Tasklist();
        $item->task_name = $request->text;
        $item->save();
        
        return 'Done';
    }
}

لكنني أردت أن تظهر المهمة الجديدة في الصفحة دون التحديث, لذلك حاولت إضافة معرف العناصر

<div id="items">
                    @php($menuCounter = 1)
                    @forelse($tasks as $task)
                        <tr>
                            <td>{{ ++$menuCounter }}</td>
                            <td class="ourItem" data-toggle="modal" data-target="#exampleModalCenter">{{ $task->task_name }}</td>
                        </tr>
                        @empty
                            <td colspan="5" class="text-center">Nothing here to show</td>
                    @endforelse
                </div>

ثم

$.post('tasks-list-add', {'text': text, '_token': $('input[name=_token]').val()}, function(data){
        $('#items').load(location.href + ' #items');    
});

هل يمكنكم مساعدتي؟