JSFiddle - React, Tailwind, and code Playground

HTML

<a id="addNewCo" href="#sph-cos-blank">Add Callout</a>
<table cellpadding="0" cellspacing="0" border="1" class="sph-portlet-table">
  <tr>
    <th>Available</th>
    <th>Home</th>
    <th>Pulling It Together</th>
    <th>Online Class</th>
    <th>Responsibilities</th>
    <th>Contact Us</th>
  </tr>
  <tr>
    <td>
        <ul class="sph-callout-portlet-avail" id="sph-callout-portlet-avail">
            <li class="ui-draggable">This is a test</li>
            <li class="ui-draggable">Paid Internship Opportunity</li>
            <li class="ui-draggable">Opportunities of the Week</li>
            <li class="ui-draggable">Public Health Organizations</li>
            <li class="ui-draggable">Events</li>
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet ui-sortable" id="sph-callout-portlet1" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet ui-sortable" id="sph-callout-portlet2" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet ui-sortable" id="sph-callout-portlet3" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet ui-sortable" id="sph-callout-portlet4" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet ui-sortable" id="sph-callout-portlet5" style="">
        </ul>
    </td>
  </tr>
</table>

CSS

.sph-portlet-table{width:100%}
.sph-portlet-table th{background:#555;padding:5px;border-left:1px solid #fff;color:#fff;width:87px}
.sph-portlet-table td{background:#eee;border-left:1px solid #fff;vertical-align:top}
.sph-callout-portlet,.sph-callout-portlet-avail {float: left;width:90%;margin:10px 0 !important;min-height:300px}
.sph-callout-portlet li{}
.sph-callout-portlet li,.sph-callout-portlet-avail li {display:block;list-style-type: none !important;cursor:move;margin:3px !important;padding:3px 5px !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#555;color:#fff;width:80px;position:relative}
.sph-portlet-table .ui-state-highlight{height:14px}

JavaScript

jQuery(document).ready(function($){
    $( ".sph-callout-portlet" ).sortable({
        opacity: 0.75,
        placeholder: "ui-state-highlight"
    });
    $( "#sph-callout-portlet-avail li" ).draggable(config);
    $(document).on("click",'#addNewCo',function(e){
        e.preventDefault();
        var newCo = $('<li>New Callout</li>').draggable(config);
        $('#sph-callout-portlet-avail').append(newCo);
    });
    
    $(document).on('mouseover','#sph-callout-portlet-avail li',function(e){
        $(this).draggable(config);
    });
    
    var config = {
        connectToSortable: ".sph-callout-portlet",
        helper: "clone",
        opacity: 0.75,
        revert: 'invalid',
        stop: function(event, ui) {
            //alert(ui)
        }
    };
});