JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list" id="list1">
    <div class="quote1">a</div>
    <div class="quote2">b</div>
    <div class="quote3">c</div>
    <div class="quote4">d</div>
    <div class="quote5">e</div>
</div>
<br>
<br>
<div class="list" id="list2">
    <div class="quote1">a</div>
    <div class="quote2">b</div>
    <div class="quote3">c</div>
    <div class="quote4">d</div>
    <div class="quote5">e</div>
</div>

CSS

.list > div{background: #EEE;display: block; padding: 10px; border: 1px solid #CCC; margin-bottom: 2px; text-transform: uppercase;}

JavaScript

var currentIndex;
$(function() {
    $( ".list" ).sortable({
        start: function(event, ui) { 
            currentIndex = ui.helper.index();
        },
        change: function( event, ui ) {
               
                
            var indexCount = ui.item.parent().find('div:not(.ui-sortable-helper)');
            var sortClass = '.'+ui.item.attr('class').split(' ')[0];
            var parent = $('.list').not(ui.item.parent());
            //alert(currentIndex);
            //alert(ui.placeholder.index());
            if(currentIndex > ui.placeholder.index()){
                parent.find('div').eq(indexCount.index(ui.placeholder)).before(parent.find(sortClass));
            }
            else
                parent.find('div').eq(indexCount.index(ui.placeholder)).after(parent.find(sortClass));
            currentIndex = ui.placeholder.index();
        }
    });
    $( ".list" ).disableSelection();
});