JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="ingredientList">
    <li class="ingredient">Apples</li>
    <li class="ingredient">Carrots</li>
    <li class="ingredient">Clams</li>
    <li class="ingredient">Oysters</li>
    <li class="ingredient">Wheat</li>
</ol>
<ol class="ingredientList">
    <li class="ingredient">Barley</li>
    <li class="ingredient">éggs</li>
    <li class="ingredient">Millet</li>
    <li class="ingredient">Oranges</li>
    <li class="ingredient">Olives</li>
</ol>

CSS

ol {
    margin-left: 70px;
    list-style-type: decimal;
    float: left;
    cursor: pointer;
}

JavaScript

$(".ingredient").click(function() {
    var $element = $(this);
    var $targetList = $element.closest('.ingredientList').siblings().first();
    
    $element.fadeOut("fast", function() {
        $element.appendTo($targetList);    
        $(".ingredient", $targetList).sort(function(a, b) {
            return $(a).text().localeCompare($(b).text());
        }).appendTo($targetList);
        $element.fadeIn('fast');
    });
});