Laravel ajax passing data to php

I have a special problem.

I am making an Ajax request to get data from the db without updating. The response I get should be outputted in a advanced way like this:

@foreach ($tasks as $task)
    <div class="pr-1">
      <div onclick="openComponent('modal-task', {{ $task->id    }});setGlobalIndex({{ $task->id }});" title="{{ $task->title }}"    class="calendar-task hover:opacity-75 cursor-pointer"    style="background-color: #{{ $task->color }};">#{{ $task->id }} {{    ucfirst(substr($task->title, 0, 23)) }}</div>
     </div>
       
      <div id="modal-task_{{ $task->id }}" class="hidden">
         <div class="display">
             <div class="top">
                 <div class="title">Opgave #{{ $task->id }} <a href="{{ route('auth.task', $task->id) }}"><div class="inline-block text-blue-600 underline    text-sm">Se hele opgaven</div></a>
             </div>
       
             <div onclick="closeComponent('modal-task', {{ $task->id }})" class="close-button"><i class="fas fa-times-circle text-gray-700"></i>
          </div>    
       </div>
       
      @include('component.task')
    </div>
  @endforeach

Right now I get the correct response from the Ajax request.

color: "e53e3e"
company_id: 1
created_date: "2020-11-13"
created_time: "00:00:00"
description: null
id: 8
status_1: null
status_2: null
status_3: null
title: "Overskrift"

But how do I output it like that, with the include also and it should appear many times (its a calendar system that gets tasks from each days)

The Ajax request POST 2 dates (from and to) till a laravel controller which returns the tasks that have the date in between.

            <script>
              var datePeriodRow = "<?php echo $datePeriodRow; ?>";
              var _token = $('input[name=_token]').val();

              $.ajax({
                  url: "/task/get",
                  type:"POST",
                  data:{
                      datePeriodRow:datePeriodRow,
                      _token: _token
                  },
                  success:function(response){
                      if(response) {
                        console.log(response);
                      }
                  },
              });
            </script>  

Answer

What you can do in your “/task/get” endpoint method is to return a view that returns a rendered html. then set the rendered response with javascript in a div element instead of that foreach loop.

So place the foreach code part in an include/partial like partial/tasks.blade.php and in your endpoint method:

/** route: /task/get **/
public function yourTasksMethod(){ 

  //your code that retrieves your tasks

  return view('partial.tasks')->with('tasks', $tasks)->render();
}

Keep in mind to clear/empty the div before you make another request to the task/get endpoint.