Как отсортировать флажки по классу, значению и проверено

У меня есть div,#subfilterNamesContainer, который содержит список флажков. Я пытаюсь написать функцию, которая будет сортировать флажки по 3 разделам.

Флажки сclass="default" должен быть вверху, упорядоченным по значению, независимо от того, отмечен он или нет.Тогда мне нужно перечислить флажки, которые не являютсяclass="default" которые проверены, упорядочены по значению.Наконец мне нужно показать все НЕclass="default" которые не проверяются и снова упорядочены по значению.

Было бы идеально иметь горизонтальное правило между этими тремя разделами.

Как я могу сделать эту задачу? Цель состоит в том, чтобы показывать пользовательские флажки по умолчанию вверху, за которыми следуют флажки не по умолчанию, которые отмечены, а затем флажки не по умолчанию, не отмеченные. Это не должно реагировать на проверку пользователей, только когда эта новая функцияsortGiveNamesFilter) называется.

<div id="subfilterNamesContainer">
    <input type="checkbox" value="X"> X <br>
    <input type="checkbox" value="A"> A <br>
    <input type="checkbox" value="A B" class="default"> A B <br>
    <input type="checkbox" value="A A" class="default"> A A <br>
    <input type="checkbox" value="F"> F <br> <--THiS ONE WILL BE CHECKED
    <input type="checkbox" value="E"> E <br> <--THiS ONE WILL BE CHECKED
</div>

Окончательный результат при вызове моей новой функции:

<div id="subfilterNamesContainer">
    <input type="checkbox" value="A A" class="default"> A A <br>
    <input type="checkbox" value="A B" class="default"> A B <br>
    <hr>
    <input type="checkbox" value="E"> E <br> <--THiS ONE WILL BE CHECKED
    <input type="checkbox" value="F"> F <br> <--THiS ONE WILL BE CHECKED
    <hr>
    <input type="checkbox" value="A"> A <br>
    <input type="checkbox" value="X"> X <br>
</div>