JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div class="testWrapper">
    <div class="test" data-percentage="30"></div>
    <div class="test" data-percentage="62"></div>
    <div class="test" data-percentage="11"></div>
    <div class="test" data-percentage="43"></div>
</div>

<br>

<div class="unselected-check w-100 mt-2">
	<a href="javascript:void(0);" data-category="price" data-input="fiyat_araligi" data-value="519-559" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>519 - 559</span></a>
	<a href="javascript:void(0);" data-category="departure" data-input="kalkis_yeri" data-value="1656" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>İstanbul</span></a>
	<a href="javascript:void(0);" data-category="day" data-input="gece_sayisi" data-value="7" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>7 Gece / 8 Gün </span></a>
	<a href="javascript:void(0);" data-category="price" data-input="fiyat_araligi" data-value="519-559" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>100 - 200</span></a>
</div>

CSS

div[data-percentage] {
    font-family: sans-serif;
    background: teal;
    padding: 10px;
    font-weight: bold;
    color: #023636;
    text-shadow: 0 1px 0 #58BBBB;
    font-size: 20px;
    width: 100px;
    margin: 4px auto;
    text-align: center;
}

div[data-percentage]:before {
    content: attr(data-percentage);
}

JavaScript

var $wrapper = $('.testWrapper');

$wrapper.find('.test').sort(function (a, b) {
	return +a.dataset.percentage.toString() - +b.dataset.percentage.toString();
}).appendTo( $wrapper );