How to sort checkboxes by class, value, and checked

I have a div, #subfilterNamesContainer that contains a list of checkboxes. I need to write a function that will sort the checkboxes in to 3 sections

• With the class="default" at the top by value, regardless if it's checked or not.
• After that I need to list the checkboxes that are NOT class="default" that are checked, sorted by value.
• Finally, I then need to show all the NOT class="default" that are unchecked and sorted by value.

It would be ideal to have a horizontal rule between these three sections as well.

How can I do this task? The goal is to show the user default checkboxes at the top, followed by the non-default checkboxes that are checked, followed by the non-default, unchecked ones. This doesn't need to be responsive to the users checking, only when this new function (let's called it sortGiveNamesFilter) is called.

<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>

Final result when my new function is called should be:

<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>