How to sort a div by a string attribute with jQuery?

I'm developing a list that has the "ID" and "Status" header and its ID and Status values, and I also set an input of type hidden for action.

Here's an example:

<div class="cabecalho">
   <div><span id="orderID">ID</span></div>
   <div><span id="orderStatus">Status</span></div>
</div>
<div id="container">
   <div class="listStatus" status="f" contagem="1">
      <div>1<div>
      <div>F<div>
   </div>

   <div class="listStatus" status="C" contagem="2">
      <div>2<div>
      <div>C<div>
   </div>
</div>
<input type="hidden" id="acao" value="asc"/>

So for the ordering to work, I wrote the following code.

$(document).ready(function(){
    $("#orderStatus").click(function(){
        var acao = $('#acao').val();
        var statusList = $(".listStatus");
        statusList.sort();
        if(acao=="desc"){
           $('#acao').val('asc');
           statusList.reverse();
        }
        else{
           $('#acao').val('desc');
        }
        $('#container').html(statusList);
    });
 });

Only the JS error console is displaying the following error: "statusList.reverse is not a function".

In addition, the 'ASC' sort order is not working.

Update:

I succeeded in the following way, it was simpler than I expected, the HTML remains the same, only the JavaScript has changed, I will leave the code below for others to use.

Follow the code below:

$("#orderStatus").click(function(){
    var acao = $('#acao').val();
    var statusList = $(".listStatus");
    statusList.sort(function(a, b) {
        if(acao == "asc"){
            $('#acao').val('desc');
            return $(b).attr("status") > $(a).attr("status");
        }
        else{
            $('#acao').val('asc');
            return $(a).attr("status") > $(b).attr("status");
        }
    });
    $('#container').html(statusList);
});