JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
    .red{ color: #ff0000; }    
</style>

<script type="text/javascript">
    $(function() {
    
    $(".dragg li").draggable();
    
    
    $("#droppable").droppable({
    
    hoverClass: 'red',
    over: function(event, ui)
    {
        //  $( --- ID FROM THE CURRENT DRAGABLE LI --- ).css('color','#ff0000');
    },
    out: function(event, ui)
    {
        // $( --- ID FROM THE CURRENT DRAGABLE LI --- ).css('color','#000000');
    }
    
    });
    
    
    });
</script>

    
    <div class="dragg">
        <li id="b1">Drag me to my target</li>
        <li id="b2">Drag me to my target</li>
        <li id="b3">Drag me to my target</li>        
    </div>
                    
   <div id="droppable"  style="border: 1px solid #000000;">
       <br /><br />Drop here<br /><br />
   </div>