JSFiddle - React, Tailwind, and code Playground

by gabs00

HTML

<div id="container">
  <ul id="tags">
  </ul>
</div>

CSS

#tags li {
  display: inline;
  text-align: center;
  border: 1px solid black;
  margin: 5px;
  border-radius: 2px;
  background-color: #e2e2e2;
  box-shadow: 3px 3px 2px #f4e4e4;
  cursor: pointer;
}

JavaScript

$(function(){
	var $taglist = $('#tags');
  
  var tags = [];
  
  for(var i = 0; i < 5; i++){
  	tags.push($('<li class="tag" data-clicked="0">' + i + '</li>'));
    $taglist.append(tags[i]);
  }
  
  var $tags = $('.tag');
  
  $tags.on('click', onClick);
  
  function onClick(e){
   	$(this).attr('data-clicked', incrementer($(this)));
    tags = sort(tags);

    $taglist.html('');
    
    tags.forEach(function($tag){
 			$taglist.append($tag);
    });
    
    $tags.on('click', onClick);
  }
});

function incrementer($elem){
	return parseInt($elem.attr('data-clicked')) + 1;
}

function sort(tags){
	return tags.sort(function($a, $b){
  	return $b.attr('data-clicked') - $a.attr('data-clicked');
  })
}