JSFiddle - React, Tailwind, and code Playground

HTML

===== Place your mouse over GREEN, BLUE or RED =======
<br><br>

<div id="leftBox">
    <div class="green">GREEN</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
</div>

<br><br>
===== Sorted List =======
<br><br>
<div id="rightBox">
    <div class="green">GREEN 1</div>
    <div class="blue">BLUE 1</div>
    <div class="red">RED 1</div>
    <div class="green">GREEN 2</div>
    <div class="blue">BLUE 2</div>
    <div class="red">RED 2</div>
    <div class="green">GREEN 3</div>
    <div class="blue">BLUE 3</div>
    <div class="red">RED 3</div>
</div>

JavaScript

$(document).ready(function(){

    $("div#leftBox div").mouseover(function(){
    
        $("div#rightBox ."+$(this).attr('class')).each(function() {

             $("div#rightBox").prepend($(this));
        });
        
    });

});


/*
// To retain old previous order of other items.

$(document).ready(function(){

    $("div#leftBox div").mouseover(function(){
        main = $('#rightBox div').clone(true);
        $("div#rightBox ."+$(this).attr('class')).each(function() {

             $("div#rightBox").prepend($(this));
        });
        
    }).mouseout(function() {
    $('#rightBox').empty().append(main);});

});

*/