JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stage-wrapper">
    <div class="stage-header">
      <span id="stage-header-name">Left</span>
      (<span id="stage-header-count">1</span>)
    </div>
    <div id="stage1" class="stage-content">
        <div id="stage1-content-1" class="content-wrapper status-active">
            <div id="content-inside">
                <div class="content-name">Title A</div>
            </div>
        </div>

    </div>
</div>

<div class="stage-wrapper">
   <div class="stage-header">
      <span id="stage-header-name">Right</span>
      (<span id="stage-header-count">4</span>)
    </div>
    <div id="stage2" class="stage-content">
       <div id="stage2-content-1" class="content-wrapper status-active">
            <div id="content-inside">
                <div class="content-name">Title B</div>
            </div>
        </div>

        <div id="stage2-content-2" class="content-wrapper status-active">
            <div id="content-inside">
                <div class="content-name">Title C</div>
            </div>
        </div>
     
        <div id="stage2-content-3" class="content-wrapper status-active">
            <div id="content-inside">
                <div class="content-name">Title D</div>
            </div>
        </div>
    
        <div id="stage2-content-4" class="content-wrapper status-active">
            <div id="content-inside">
                <div class="content-name">Title E</div>
            </div>
        </div>
    </div>
</div>

<div id="dragged-from" style="display:none;"></div>
<div id="dragged-to" style="display:none;"></div>

CSS

.placeholder {
    border: 1px dashed #C8C8C8;
    background-color: #FFFFFF;
    padding: 10px;
    background: #FFFFFF;
    height: 30px;
    margin-bottom: 1px;
}
.stage-wrapper {
float:left;
margin-left:20px;
height: 500px;
width: 220px;    
background-color: #FFFFFF;
border: 1px solid #C1C1C1;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.stage-header {
    border-bottom: 1px solid #C1C1C1;
    padding: 10px;
    font-weight: bold;
    font-size: 13px;
    font-family: arial;
}
.stage-content {
    padding: 4px;
    height: 100%;
}
.content-wrapper {
    border: 1px solid #C8C8C8;
    background-color: #FFFFFF;
    height: 50px;
    cursor: move;
    width: 210px;
    margin-bottom: 1px;
}
#content-inside {margin:5px 5px 5px 16px; width: auto; height: 40px;}
.content-selected {background: #454545;}
.selected { background: aliceBlue;}

JavaScript

$(function() {
     $('.stage-content').each(function(){
         $(this).sortable({
             connectWith: ".stage-content",
             placeholder: 'placeholder',
             start: function(ui, e) {
                 e.item.siblings(".selected").appendTo(e.item);
                 var id = e.item.attr('id');
                 var parent = $('#'+id).parent('.stage-content').attr('id');
                 //$('#dragged-from').html(parent);
                 //var currentCount = $('#' + id).parents('.stage-wrapper').find('#stage-header-count').html();
                // $('#' + id).parents('.stage-wrapper').find('#stage-header-count').html();
                 //$(this).sortable( "refreshPositions" );
             },
             stop: function(ui, e){
                 e.item.after(e.item.find(".content-wrapper"));
                 var id = e.item.attr('id');
                 var parent = $('#'+id).parent('.stage-content').attr('id');
                 $('#dragged-to').html(parent);
                 var draggedTo = $('#dragged-to').html();
                 var draggedFrom = $('#dragged-from').html();
                                  
                 if(draggedTo != draggedFrom){
                 var draggedToCount = $('#' + draggedTo).parents('.stage-wrapper').find('#stage-header-count').html();
                 var draggedFromCount = $('#' + draggedFrom).parents('.stage-wrapper').find('#stage-header-count').html();
                 $('#' + draggedTo).parents('.stage-wrapper').find('#stage-header-count').html(parseInt(draggedToCount)+1);
                 $('#' + draggedFrom).parents('.stage-wrapper').find('#stage-header-count').html(parseInt(draggedFromCount)-1);
                 }             
             }
         });
     });
     $('.content-wrapper').each(function(){
         $(this).click(function(e) {
             if(e.ctrlKey) {
                 $(this).toggleClass('selected');
             }
         });
     });
 });