Untitled

<!DOCTYPE html>
<html>

  <head>
    <link data-require="fontawesome@4.1.0" data-semver="4.1.0" rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="sortBtn"><i class="fa fa-sort-desc"></i></div>
    <div id="table1"></div>
  </body>

</html>

// Code goes here
function getDescTable(dataArray){
  var result = '';
  dataArray.forEach(function(data){
    result += '<div>'+data+'</div>';
  });
  return result;
}
function getAscTable(dataArray){
  var result = '';
  dataArray.forEach(function(data){
    result = '<div>'+data+'</div>' + result;
  });
  return result;
}

var dataArray = ['aaaa','bbbb','cccc'];
var sortType = 0;
$(document).ready(function(){
  $('#table1').html(getDescTable(dataArray));
  $('#sortBtn').click(function(){
    var icon = $(this).find('i');
    if(icon.hasClass('fa-sort-desc')){
      icon.removeClass('fa-sort-desc');
      icon.addClass('fa-sort-asc');
      $('#table1').html(getAscTable(dataArray));
    } else {
      icon.removeClass('fa-sort-asc');
      icon.addClass('fa-sort-desc');
      $('#table1').html(getDescTable(dataArray));
    }
  });
});

/* Styles go here */