JSFiddle - React, Tailwind, and code Playground

by agapetos

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
  <ul id="ullista">
    <li id="dav" style="background:#afa">
      <div class="prva">David</div>
      <div class="druga">Šili</div>
      <div class="treca">Mačka</div>
      <input class="cetvrti" type="text" value="2" />
      <input class="peti" type="text" value="4" />
      <input class="sesti" type="text" value="10" />
    </li>
    <li id="dar" style="background:#aaf">
      <div class="prva">Darko</div>
      <div class="druga">Režić</div>
      <div class="treca">Pas</div>
      <input class="cetvrti" type="text" value="14" />
      <input class="peti" type="text" value="5" />
      <input class="sesti" type="text" value="7" />
    </li>
    <li id="pet" style="background:#ffa">
      <div class="prva">Petra</div>
      <div class="druga">Šili</div>
      <div class="treca">Lizi</div>
      <input class="cetvrti" type="text" value="5" />
      <input class="peti" type="text" value="2" />
      <input class="sesti" type="text" value="8" />
    </li>
    <li id="dan" style="background:#faa">
      <div class="prva">Danka</div>
      <div class="druga">Režić</div>
      <div class="treca">Ništa</div>
      <input class="cetvrti" type="text" value="12" />
      <input class="peti" type="text" value="3" />
      <input class="sesti" type="text" value="6" />
    </li>
  </ul>

  <input id="prva"  type="button"value="Prva" />
  <input id="druga" type="button" value="Druga" />
  <input id="treca" type="button" value="Treća" />
  <input id="cetvrti" type="button" value="Četvrti" style="margin-left:10px" />
  <input id="peti" type="button" value="Peti" />
  <input id="sesti" type="button" value="Šesti" />

CSS

#ullista div {
  float: left;
  margin: 3px;
  width: 50px;
}

#ullista li {
  height: 30px;
  width: 500px;
  list-style-type: none;
}

#ullista input {
  width: 100px;
}

#ullista {
  padding-left: 0;
}

JavaScript

var prva = 0;
var druga = 0;
var treca = 0;
var cetvrti = 0;
var peti = 0;
var sesti = 0;

$('#prva').click(function() {
  var sortList = $('#ullista');
  sortItems =  sortList.children("li");
  sortItems.sort(function(a, b) {
	
	if (prva==0) {
		var compA = $(a).children('.prva').text().toUpperCase();
		var compB = $(b).children('.prva').text().toUpperCase();
		
	}
	else {
		var compB = $(a).children('.prva').text().toUpperCase();
		var compA = $(b).children('.prva').text().toUpperCase();
	}
	
    console.log(compA);
    console.log(compB);
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
	});
  $.each(sortItems, function(idx, itm) {
	sortList.append(itm);
  });
if (prva==0) prva=1;
else prva=0;
});

$('#druga').click(function() {
  var sortList = $('#ullista');
  sortItems =  sortList.children("li");
  sortItems.sort(function(a, b) {
	  
	if (druga==0) {
		var compA = $(a).children('.druga').text().toUpperCase();
		var compB = $(b).children('.druga').text().toUpperCase();
	} else {
		var compB = $(a).children('.druga').text().toUpperCase();
		var compA = $(b).children('.druga').text().toUpperCase();
	}
    console.log(compA);
    console.log(compB);
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
  });
  $.each(sortItems, function(idx, itm) {
    sortList.append(itm);
  });
if (druga==0) druga=1;
else druga=0;
});

$('#treca').click(function() {
  var sortList = $('#ullista');
  sortItems =  sortList.children("li");
  sortItems.sort(function(a, b) {
	if (treca==0) {
		var compA = $(a).children('.treca').text().toUpperCase();
		var compB = $(b).children('.treca').text().toUpperCase();
	} else {
		var compB = $(a).children('.treca').text().toUpperCase();
		var compA = $(b).children('.treca').text().toUpperCase();
	}
    console.log(compA);
    console.log(compB);
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
  });
  $.each(sortItems, function(idx, itm) {
    sortList.append(itm);
  });
if (treca==0) treca=1;
else...