I have the following html structur (endless):

```
<div class="wrapper">
   <div class="content"> Its block 3
      <div class="number">3</div>
   </div>
</div>

<div class="wrapper">
   <div class="content"> Its block 2
      <div class="number">2</div>
   </div>
</div>

```

I want to sort it by clicking a button like this:

```
<div class="wrapper">
   <div class="content"> Its block 2  <--- new order
      <div class="number">2</div> <--- new order
   </div>
</div>

<div class="wrapper">
   <div class="content"> Its block 3  <--- new order
      <div class="number">3</div> <--- new order
   </div>
</div>

```

... but with my script it doesn´t work (because of the same div class name, I think?). So, how can I sort this and toggle the sort by highest number and lowest number? Can anybody help me?

```
function sortHigh(a, b) {
    var date1 = $(a).find(".content .number").text()
    var date2 = $(b).find(".content .number").text();

    return $(a).find(".content .number").text() > $(b).find(".content .number").text();
};

function sortLow(a, b) {
    var date1 = $(a).find(".content .number").text()
    var date2 = $(b).find(".content .number").text();

    return $(a).find(".content .number").text() < $(b).find(".content .number").text();
};

//how to toggle?
$(function () {
    $('.sort').click(function () {
        $('.content').sort(sortHigh).appendTo('.wrapper');
    }, function () {
        $('.content').sort(sortLow).appendTo('.wrapper');
    });
});

```

Thats my bad try: [fiddle](http://jsfiddle.net/o954txn6/)