Jquery to open PHP loop div

Question

I have an application that lists registered tasks for each user, and this is in a while PHP loop that has a fetch array with mysql to create the list. The problem is on the button that expands the task div, which uses Jquery, and is working only with the first task listed.

<?php
    while ($user_tasks = mysqli_fetch_array($query_tasks)) {
        $task_name = $user_tasks["taskName"];
        $task_desc = $user_tasks["taskDesc"];
        $task_createDate = $user_tasks["taskCreateDate"];
        $task_date = $user_tasks["taskDate"];
        $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-tasks fa-2x"></i>
            <a id="btn-open-task"><i class="fas fa-angle-down fa-2x angle-task"></i></a>
        </div>
    </p>
    <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 $task_createDate ?> </h6> <!-- 99/09/9999 às 00:00 -->
        <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"><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_name ?></b></h4>
    <p>
        <h6 class="text-muted font-weight-normal">Em <?php echo $task_date ?></h6> <!-- 99/09/9999 - 00:00 até 99:00 -->
    </p>
</div>
<?php 
    }
?>
<script type="text/javascript">
    $('#btn-open-task').on('click', function() {
        $('#div-opts-task').slideToggle('fast');
        $(".angle-task").toggleClass('flip');
    });
</script>

The end part of the script represents the Jquery, the . Angle-task is the Fon Awasome icon representing the opening toggle.

If anyone can shed some light... :)

Answer 1

The first problem is that you are using an id(id="btn-open-task") as selector on your button, ids cannot repeat themselves, so switch to a class, can be with the same name. The path to your problem is to use the this, can understand better here: http://wbruno.com.br/jquery/afinal-e-javascript/.

<script type="text/javascript">
    $('.btn-open-task').on('click', function(){
        // Armazena o objeto clicado
        var $this = $(this);
        // Aqui pega a div(.div-tasks) mais próxima na hieraquia e procura pela div(.div-opts-task)
        $this.closest('.div-tasks').find('.div-opts-task').slideToggle('fast')
        // Procura dentro do botão clicado a tag i(.angle-task); 
        $this.find(".angle-task").toggleClass('flip');
    });
</script>

If you give a console.log($this) you will see that this variable contains the absolute path of your selector, making it unique in relation to your code, repeat again the care with the ids, they can not repeat themselves, are unique identifiers, and in the case of loop it does not work as selector.