Как передать значения массива базы данных от PHP до ajax и от ajax до PHP (используя ajax метод post)

Question

Я пытаюсь получить массив всех идентификаторов и базы данных и вывести тег html, который был успешным, теперь я хочу обновить значения из базы данных, используя ajax метод post, но ajax может найти только 1-е значение в базе данных, что означает, что оно не получает его в виде массива, а представляет собой одно значение. ЗДЕСЬ PHP КОД

    <div class="chat-contents">
        <div class="chat-content-wrap">
            <div class="chat-wrap-inner">
                <div class="chat-box">
                    <div class="task-wrapper">
                        <div class="task-list-container">
                            <div class="task-list-body">
                                <div id="status">
                                </div>
                                <ul id="task-list">
    <?php
        $sql_p = "SELECT * FROM task";
        $query_p = mysqli_query($db_conx, $sql_p);
        while ($row_p = mysqli_fetch_array($query_p)) {
            # code...
            $task_id = $row_p['task_id'];
            $project_idss = $row_p['project_id'];
            $task_desc = $row_p['task_desc'];
            $task_status = $row_p['status'];


        ?> 
                                    <li class="task">
                                        <div class="task-container">
                                            <span class="task-action-btn task-check">
                                                <span class="action-circle large complete-btn" title="Mark Complete"
                                                                                id="add-tasks" type="submit" onclick='ajax_taskcomplete();'>
                                                    <i class="material-icons">check</i>
                                                </span>
                                            </span>
                                            <input type="text" id="new-task" value="<?php echo $task_id; ?>" />
                                            <span class="task-label" contenteditable="true">
                                                <?php echo $task_desc; ?>
                                            </span>
                                            <span class="task-action-btn task-btn-right">
                                                <span class="action-circle large" title="Assign">
                                                    <i class="material-icons">person_add</i>
                                                </span>
                                                <span class="action-circle large delete-btn" title="Delete Task">
                                                    <i class="material-icons">delete</i>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
    <?php 
    }
    ?>
                                <div class="task-list-footer">
                                </div>
                            </ul>
                        </div>

ЗДЕСЬ JAVASCRIPT КОД

    <script >
        function ajax_taskcomplete() {
            // Create our XMLHttpRequest object
            var hr = new XMLHttpRequest();
            // Create some variables we need to send to our PHP file
            var url = "ajax_taskcomplete.php";
            var fn = document.getElementById("new-task").value;
            // var ln = document.getElementById("Description2").value;

            // var st = document.getElementById("statuss").value;
            // var pd = document.getElementById("pros").value;
            // var id = document.getElementById("id").value;
            //+"&Desc="+ln+"&statuss="+st+"pros="+pd
            var vars = "Title=" + fn;
            hr.open("POST", url, true);
            // Set content type header information for sending url encoded variables in the request
            hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // Access the onreadystatechange event for the XMLHttpRequest object
            hr.onreadystatechange = function() {
                if (hr.readyState == 4 && hr.status == 200) {
                    var return_data = hr.responseText;
                    document.getElementById("status").innerHTML = return_data;
                }
            }
            // Send the data to PHP now... and wait for response to update the status div
            hr.send(vars); // Actually execute the request
            document.getElementById("status").innerHTML = "<img src='assets/img/preloader.gif' alt='Processing...'>";
        }
     </script>

JSON СОСТОЯНИЕ:

0: {task_id: "6", task_desc: "frontend", project_id: "3", company_id: "Sphere", user_id: "1", …} 1: {task_id: "7", task_desc: "Backend", project_id: "2", company_id: "Sphere", user_id: "1", …} 2: {task_id: "14", task_desc: "peanut lebel", project_id: "1", company_id: "Sphere", user_id: "1", …} 3: {task_id: "21", task_desc: "netflix page", project_id: "1", company_id: "Sphere", user_id: "1", …} length: 4