JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<div id="aphaOrder">
	<div class="value"  data-site="olark">olark</div>   
	<div class="value"  data-site="snapengage">snapengage</div> 
	<div class="value"  data-site="helponclick">helponclick</div>
	<div class="value"  data-site="hangouts">hangouts</div>
	<div class="value"  data-site="atlass">atlass</div> 
	<div class="value"  data-site="hipchat">hipchat</div>   
	<div class="value"  data-site="chat hip">chat hip</div>
	<div class="value"  data-site="force">force</div>
	<div class="value"  data-site="sugar sms">sugar sms</div>
	<div class="value"  data-site="capsule">capsule</div>
	<div class="value"  data-site="highrise">highrise</div>
	<div class="value"  data-site="nimble">nimble</div>
	<div class="value"  data-site="batch">batch</div>
	<div class="value"  data-site="book crm">book crm</div>
	<div class="value"  data-site="solve">solve</div>
	<div class="value"  data-site="insightly">insightly</div>
	<div class="value"  data-site="pipeliner">pipeliner</div>
	<div class="value"  data-site="shopify">shopify</div>
	<div class="value"  data-site="wordpress">wordpress</div>
	<div class="value"  data-site="Magento">Magento</div>
</div>

JavaScript

var alphabeticallyOrderedDivs = $('.value').sort(function(a, b) {
			return String.prototype.localeCompare.call($(a).data('site').toLowerCase(), $(b).data('site').toLowerCase());
		});
	
var container = $("#aphaOrder");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('body').append(container);