JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="mapDiv">
    <table cellpadding="0" cellspacing="0" border="10" class="display" id="mappingChar" style="float: left;"></table>
    <table cellpadding="0" cellspacing="0" border="10" class="display" id="mappingClass" style="float: left;"></table>
</div>

JavaScript

$(document).ready(function () {
    var mapcharTab = $('#mappingChar').dataTable({
        'aaData': [
            ['Fred', 0],
            ['Stacy', 0],
            ['Will', 0],
            ['Barbara', 0],
            ['Maureen', 0],
            ['Lucille', 0]
        ],
            'aoColumns': [{
            'sTitle': 'Name'
        }, {
            'sTitle': 'Class'
        }],
            'bSort': false,
            'sDom': '<"top"><"Row">t<"bottom">'

    });

    var mapclassTab = $('#mappingClass').dataTable({
        'aaData': [
            ['Paladin.'],
            ['Ranger'],
            ['Fighter'],
            ['Warlord'],
            ['Warden']
        ],
            'aoColumns': [{
            'sTitle': 'Characteristic'
        }],
            'bSort': false,
            'sDom': '<"top"><"Row">t<"bottom">'

    });

    $('#mappingClass td').draggable({
        helper: "clone"
    });

    $('#mappingChar tr').droppable({
            hoverClass: "ui-state-hover",
            drop: function (event, ui) {
                var dropped = $(this),
                    droppedRow = dropped.closest('tr');
                
                console.log(droppedRow.index());
            }
        });

});