JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="attachedCards">
    <ul>
           <li>
                <div>ddd</div>
                <div>
                some useless info2
                </div>

            </li>

            <li>
            <div>ccc</div>
            <div>some useless info1</div>
            </li>
           <li>
           <div>bbb</div>
            <div>some useless info3</div>
           </li>
           <li>
            <div>aaa</div>
            <div>some useless info4</div>
           </li>
       </ul>
  </div>

JavaScript

function newSort(){
$('#attachedCards ul li').html(
   $('#attachedCards ul li div').sort(function (a, b) {
       return $(a).text().toUpperCase().localeCompare(
            $(b).text().toUpperCase());
    })
);
}
newSort()