An issue with Ajax to add or remove class with php

The problem that has arisen is that completely randomly and after I toggle some notes to get the done or pending theme, some of them do not show the class change. For example, the first one turns from red to green, the second one turns green. Yes, the third one does not turn green!!

By refreshing the page, I realized that the theme has also changed, but the page must be refreshed. This problem is only for toggle and not for remove. See the codes …

html:

<ul class="todo-entry <?= $doneClass ?>">
    <li>
        <span onclick="noteToggle(this, <?= $record['note_id'] ?>)" class="btn"> * </span>
    </li>
</ul>

jquery:

function noteToggle(sender, noteId) {
    sender = $(sender);
    var parent = sender.parentsUntil().parent();
    $.ajax('<?= baseUrl() ?>/note/toggle/' + noteId, {
        type: 'post',
        dataType: 'JSON',
        success: function (data) {
            if (parent.hasClass('done')) {
                parent.removeClass('done');
                parent.addClass("pending");
            } else {
                parent.removeClass('pending');
                parent.addClass("done");
            }

        }
    });
}

php : note/toggle Controler

public function toggle($noteId)
{

    if (!isset($_SESSION["user_id"])) {
        exit;
    }

    $userId = $_SESSION["user_id"];
    NoteModel::toggle($noteId, $userId);
    echo json_encode(array("status" => true,));
}

noteModel Class:

public static function toggle($noteId,$userId){
        $db = Db::getInstance();
        $db->modify(" UPDATE table_name SET isDone= NOT isDone WHERE note_id = $noteId  AND user_id = $userId");
    }

I tried many options and I didn’t get JavaScript error in the browser either. By hitting the toggle, the classes are applied and the theme is changed, but this does not happen only for some notes, which is applied by refreshing the theme page.