JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

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

$("#aphaOrder .value").sort(function (a, b) {
    if ( ($(a).attr("data-site").toLowerCase() > $(b).attr("data-site").toLowerCase()) )  { 
        return 1;
    } else if ( ($(a).attr("data-site").toLowerCase() == $(b).attr("data-site").toLowerCase()) ){
        return 0;
    } else {
        return -1;
    }
}).each(function () {
    var elem = $(this);
    elem.remove();
    $(elem).appendTo("#aphaOrder");
});