View data from fetch array in modal - PHP

Question

I’m making a task application with database, in which data is stored in a mysqli_fetch_array and listed in a loop while.

When I click on a expand button, which has in the task structure (code below), I want it to show the task data that I clicked, and not from the first generated task that is how it is going.

<?php
        while ($user_tasks = mysqli_fetch_array($query_tasks)) {
            $task_title = $user_tasks["taskTitle"];
            $task_desc = $user_tasks["taskDesc"];
            $task_createDate = $user_tasks["taskCreateDate"];
            $task_dateStart = $user_tasks["taskDateStart"];
            $task_dateFinish = $user_tasks["taskDateFinish"];
            $task_important = $user_tasks["isImportant"];
            $task_icon = $user_tasks["taskIcon"];
    ?>
    <div class="shadow p-4 mb-3 div-home div-tasks div-dark-mode">
        <p>
            <div class="div-header">
                <i class="fad fa-<?php echo $task_icon ?> fa-2x"></i>
                <a class="btn-open-task"><i class="fas fa-angle-down fa-2x angle-task"></i></a>
            </div>
        </p>
        <?php
            if ($task_important == 1) {
                echo "
                <div class='div-header'>
                    <div class='task-important'></div>
                </div>";
            }
        ?>
        <div class="div-opts-task" id="div-opts-task">
        <br>
        <h6 class="text-muted font-weight-light">Criada em <?php echo date('d/m/Y - H:i',strtotime($task_createDate)) ?> </h6>
            <div class="form-row text-center">
                <div class="col">
                    <button class="btn-first btn-dark-first" type="button"><i class="fad fa-edit"></i> &nbspEditar</button>
                </div>
                <div class="col">
                    <button class="btn-third btn-dark-third" type="button" data-toggle="modal" data-target="#taskModal"><i class="fad fa-eye"></i> &nbspExpandir</button>
                </div>
                <div class="col">
                    <button class="btn-second btn-dark-second" type="button"><i class="fad fa-trash"></i> &nbspDeletar</button>
                </div>
            </div>
            <hr>
        </div>
        </p>
        <h4><b><?php echo $task_title ?></b></h4>
        <p>
            <h6 class="text-muted font-weight-normal">Em <?php echo date('d/m/Y - H:i',strtotime($task_dateStart)) ?> até <?php echo date('d/m/Y - H:i',strtotime($task_dateFinish)) ?></h6>
        </p>
        <div class="modal fade" id="taskModal" tabindex="-1" role="dialog" aria-labelledby="taskModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="taskModalLabel"><b>Informações da tarefa<b></h4>
                    </div>
                    <div class="modal-body">
                        <?php
                            echo $task_title;
                            echo $task_desc;
                            echo $task_createDate; 
                            echo $task_dateStart;
                            echo $task_dateFinish;
                            echo $task_important;
                            echo $task_icon;
                        ?>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-exit-modal" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php 
        }
    ?>

I don’t really know how to do that.

Answer 1

Your case is the same case of this user here, ids can not repeat themselves, see the solution How to pass an id through a modal window, it happens that in both cases you are repeating the id of the modal, because it is within a loop, you will have several taskModal, but not true you need to have modals with distinct ids taskModal1,taskModal2 and so on. Access the link you will understand how to solve.