Как перенести php код в html при помощи js

const closeButton = document.getElementById('option-close-button')
const optionBlock = document.getElementById('option-block')
const tasks = document.getElementById('tasks')
const edit = document.getElementById('edit-id')
const createId = document.getElementById('taskId')
var taskId = 6

function render(id)  {
    createId.insertAdjacentText ('beforeend', `
    <div>
            @php
                foreach ($tasks as $task) {
                if ($task['id'] == 7) {
                    $thisUser = $task;
                }
                }
                dd($thisUser);  
            @endphp
        </div>
    `)
}

tasks.onclick = function (event) {
    if(event.target.dataset.type == 'more') {
        console.log(event.target.dataset.index)
        edit.value = event.target.dataset.index
        optionBlock.style.display = 'block'
        taskId = event.target.dataset.index
        render(taskId)
        console.log('tasks.value: ', edit.value)
    }
}

console.log(moreButton)

closeButton.onclick = function() {
    optionBlock.style.display = 'none'
}

@extends('layout.layout')

@section('title', 'Менеджер задач')

@section('content')

<script src="js/task-manager.js" defer></script>
    {{-- <div class="task_groups">
        <div class="inline-flex">
            <div class="task_group">Задачи </div>
            <div class="task_group">Ежедневные задачи</div>
            <div class="task_group">Выполненные задачи</div>
            <div class="task_group">Group 1 </div>
        </div>
        
    </div> --}}

    {{-- сюда планирую экранировать переменную--}}

    <div id="taskId">
        {{-- <div>
            @php
                foreach ($tasks as $task) {
                if ($task['id'] == 7) {
                    $thisUser = $task;
                }
                }
                dd($thisUser);  
            @endphp
        </div> --}}
        
    </div>

    

    <form action="{{route('tasks-add')}}" method="post" style="margin-top: 50px;">
        @csrf
        <input type="text" class="add-task-form" name="title" placeholder="+ Добавить название задачи в группе “Задачи”">
    </form>

    {{-- модальный блок для редактирования задачи --}}

    <div class="option_block" id="option-block">
        <div class="option_close_button"><img src="img/close-option.png" id="option-close-button" alt=""></div>
        <form action="{{route('task-update')}}" method="post">
            @csrf
            <input type="text" style="visibility: hidden; position: absolute;" name="id" value="" id="edit-id">
            <input type="text" name="name" class="option_form" id="option-name" value="">
            <textarea name="description" class="option_area" id="option-descr" value=""></textarea>
            {{-- <input type="file" class="input_file" id="input-file">
            <label for="input-file" class="file_container">
                <img src="img/attach.png" alt=""> <p>закрепить файл</p>
            </label> --}}

            <input type="date" name="date" style="margin: 0 auto;">
            <button class="option_button" type="submit">Сохранить</button>
        </form>
        
    </div>

    {{-- генерация задач --}}

    <div class="tasks" id="tasks"> 
            @foreach ($tasks as $task)
            @if ($user->id == $task['user_id'])
            <div class="task_block">
                <input type="text" style="display:none" value="{{$task['id']}}" >
                <div class="task_title">{{$task['title']}}</div>
                <div class="task_description">{{$task['description']}}</div>
                <div class="task_date">{{$task['deadline']}}</div>
                <div class="task_buttons">
                    <div class="task_more"><a href="{{route('task-complete').'?id='.$task['id']}}"><img src="img/approve.png" alt=""></a></div>
                    <div class="more-button" id="" data-type="more" data-index="{{$task['id']}}"><img src="img/edit2.png" alt="" data-type="more" data-index="{{$task['id']}}"  ></div>
                </div>
                
               
            </div>

            @endif

            @endforeach
    
    </div>




@endsection