Isotope - target first / last item sorting

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<ul id="sorts">
  <li><a href="#original-order" data-sort="original-order" class="selected">original order</a></li>
  <li><a href="#family" data-sort="family">Family</a></li>
  <li><a href="#electronics" data-sort="electronics">Electronics</a></li>
  <li><a href="#watches" data-sort="watches">Watches</a></li>
  <li><a href="#fashion" data-sort="fashion">Fashion</a></li>
      <li><a href="#fashion" data-sort="jewelry">Jewelry</a></li>

</ul>

<div id="container" class="clearfix"> 
    <div class="element family">
        family
    </div>
      <div class="element watches">
        watches
    </div>
      <div class="element electronics">
        electronics
    </div>
      <div class="element jewelry">
        jewelry
    </div>
      <div class="element jewelry">
        jewelry
    </div>
      <div class="element fashion">
        fashion
    </div>  <div class="element family">
        family
    </div>  <div class="element watches">
        watches
    </div>
      <div class="element fashion">
        fashion
    </div>
      <div class="element family">
        family
    </div>
      <div class="element family">
        family
    </div>
      <div class="element family">
        family
    </div>
      <div class="element family">
        family
    </div>
</div> <!-- #container -->

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.clicked{
    font-weight: bold;
}

.element {
  width: 65px;
  height: 65px;
  background: #666;
  color: white;
  font-weight: bold;
  float: left;
  margin: 3px;
  padding: 3px;
  font-size: 12px;
}

.family{
    background-color: red;
}
.watches{
    background-color: blue;
}
.fashion{
    background-color: black;
}
.jewelry{
    background-color: yellow;
    color: black;
}
}
.element.first { background: red; }
.element.last { background: blue; }

.selected {
  background: yellow;
}

#sorts li { display: inline-block; }

/* isotope transition styles */

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

window.electronics = [2,3,4,9,5];
window.family= [3,9,5,2,4];
window.watches = [4,5,9,2,3];
window.jewelry = [5,9,3,4,2];
window.fashion = [9,5,4,3,2];

$(".element").each(function(){
    var $this = $(this);
 $this.data("electronics", window.electronics);
     $this.data("family", window.family); 
     $this.data("watches", window.watches); 
     $this.data("jewelry", window.jewelry); 
     $this.data("fashion", window.fashion); 
    if ($this.hasClass("family")){
        $this.data("num", 3);
    }
     if ($this.hasClass("electronics")){
        $this.data("num", 2);
    }
     if ($this.hasClass("watches")){
        $this.data("num", 4);
    }
     if ($this.hasClass("fashion")){
        $this.data("num", 9);
    }
     if ($this.hasClass("jewelry")){
        $this.data("num", 5);
    }
    
    
    $this.append($this.data("num"));
    
});


$(function(){
  var $container = $('#container');
  
    
  $container.isotope({
    itemSelector : '.element',
    getSortData : {
      family : function( $elem ) {
           return $elem.data("family").indexOf($elem.data("num"));   
      },
        electronics: function($elem){
           return $elem.data("electronics").indexOf($elem.data("num"));   

        },
        jewelry : function( $elem ) {
           return $elem.data("jewelry").indexOf($elem.data("num"));   
      },
        watches : function( $elem ) {
           return $elem.data("watches").indexOf($elem.data("num"));   
      },
        fashion : function( $elem ) {
           return $elem.data("fashion").indexOf($elem.data("num"));   
      },
    }
  });
    
  // sorting
  $('#sorts a').click(function(){
    var $this = $(this);
        $(".clicked").removeClass("clicked");
        $this.addClass("clicked");
      var  sortName = $this.data('sort');
     
    $container.isotope({ 
      sortBy : sortName
    });
    return false;
  });
  
});