Tenho uma aplicação que lista tarefas cadastradas para cada usuário, e isso está em um loop while PHP que possui um fetch array com o mySQL para criar a lista. O problema está no botão que expande a div de tarefas, que usa Jquery, e está funcionando só com a primeira tarefa listada.
<?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>  Editar</button>
</div>
<div class="col">
<button class="btn-third btn-dark-third" type="button"><i class="fad fa-eye"></i>  Expandir</button>
</div>
<div class="col">
<button class="btn-second btn-dark-second" type="button"><i class="fad fa-trash"></i>  Deletar</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>
A parte do final no script representa o Jquery, o .angle-task é o icone do Fon Awasome que representa o toggle de abertura.
Se alguém puder dar uma luz ai... :)