Как отсортировать задачи по их важности?

Задачи вывожу с помощью PHP, у каждой задачи есть Время и Важность, как их отсортировать по времени или по важности с помощью JS? Отблагодарю(если это можно здесь) донатом в виде 200 рублей. Спасибо

<h2 class="users__title">Список задач</h2>

<div class="users__wrapper">

    <div class="tasks__top-wrapper">
        <a href="/<?= APP_BASE_PATH ?>/todo/tasks/create" class="tasks__create-btn">Создать задачу</a>
        <div class="tasks__top-wrapper-inner-wrapper-first">
            <div class="tasks__top-wrapper-btn-wrapper">
                <div class="tasks__top-wrapper-inner-wrapper-title">По времени</div>
                <div class="tasks__top-wrapper-inner-wrapper">
                    <button class="tasks__top-wrapper-btn tasks-btn__up-time">↑</button>
                    <button class="tasks__top-wrapper-btn tasks-btn__down-time">↓</button>
                </div>
            </div>
            <div class="tasks__top-wrapper-btn-wrapper">
                <div class="tasks__top-wrapper-inner-wrapper-title">По важности</div>
                <div class="tasks__top-wrapper-inner-wrapper">
                    <button class="tasks__top-wrapper-btn tasks-btn__up-priority">↑</button>
                    <button class="tasks__top-wrapper-btn tasks-btn__down-priority">↓</button>
                </div>
            </div>
        </div>

    </div>



    <div class="tasks__list">
        <?php foreach ($toDoTasks as $toDoTask): ?>
        <div class="tasks__list-item">
            <div class="tasks__list-item-first">
                <div class="tasks__list-item-title" title="Заголовок"><i class="fa-solid fa-square-up-right" style="color: green"></i>&nbsp; <?= $toDoTask['title'] ?></div>
                <div class="tasks__list-item-priority" title="Статус"><i class="fa-solid fa-person-circle-question" style="color: green"></i>&nbsp;<?= $toDoTask['status'] ?></div>
                <div class="tasks__list-item-time" title="Дата окончания">
                    <i class="fa-solid fa-hourglass-start" style="color: green"></i>&nbsp;<div class="finish_date"><?= $toDoTask['finish_date'] ?></div>
                </div>
            </div>
            <div class="tasks__list-item-second">
                <div class="tasks__list-item-second-wrapper">
                    <div class="tasks__list-item-second-category tasks__list-item-second-pre"><i class="fa-solid fa-layer-group"></i>&nbsp;Категория:&nbsp;<div><?= $toDoTask['category'] ?></div> </div>
                    <div class="tasks__list-item-second-status tasks__list-item-second-pre"><i class="fa-solid fa-battery-three-quarters"></i>&nbsp;Статус:&nbsp;<div><?= $toDoTask['status'] ?></div> </div>
                    <div class="tasks__list-item-second-priority tasks__list-item-second-pre"><i class="fa-solid fa-person-circle-question"></i>&nbsp;Приоритет:&nbsp;<div><?= $toDoTask['priority'] ?></div> </div>
                    <div class="tasks__list-item-second-finish tasks__list-item-second-pre"><i class="fa-solid fa-hourglass-start"></i>&nbsp;Дата окончания:&nbsp;<div><?= $toDoTask['finish_date'] ?></div> </div>
                    <div class="tasks__list-item-second-description tasks__list-item-second-pre"><i class="fa-solid fa-file-prescription"></i>&nbsp;Описание:&nbsp;<div><?= $toDoTask['description'] ?></div> </div>
                </div>
                <div class="tasks__list-item-todo-actions">
                    <form method="post" action="/<?= APP_BASE_PATH ?>/todo/tasks/edit" class="users__list-item-actions-edit">
                        <input type="text" name="id" value="<?= $toDoTask['id'] ?>" hidden>
                        <input type="text" name="title" value="<?= $toDoTask['title'] ?>" hidden>
                        <input type="text" name="reminded_at" value="<?= $toDoTask['reminded_at'] ?>" hidden>
                        <input type="text" name="category" value="<?= $toDoTask['category'] ?>" hidden>
                        <input type="datetime-local" name="finish_date" value="<?= $toDoTask['finish_date'] ?>" hidden>
                        <input type="text" name="status" value="<?= $toDoTask['status'] ?>" hidden>
                        <input type="text" name="priority" value="<?= $toDoTask['priority'] ?>" hidden>
                        <input type="text" name="description" value="<?= $toDoTask['description'] ?>" hidden>
                        <button class="users__list-item-action-btn-edit">Редактировать</button>
                    </form>
                    <form method="post" action="/<?= APP_BASE_PATH ?>/todo/tasks/delete" class="users__list-item-actions-edit">
                        <input type="text" name="id" value="<?= $toDoTask['id'] ?>" hidden>
                        <button class="users__list-item-action-btn-delete" onclick="return confirm('Вы уверены?')">Удалить</button>
                    </form>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>

</div>

<script>
    const upTime = document.querySelector('.tasks-btn__up-time');
    const downTime = document.querySelector('.tasks-btn__down-time');
    const upPriority = document.querySelector('.tasks-btn__up-priority');
    const downPriority = document.querySelector('.tasks-btn__down-priority');
</script>