JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<div id="ListContainer">
	<table>
	<tr>
	<td>
		<ul id="L" class="L ui-sortable">
		Available (A):
		<li id='L_1'>
			<span class='nojs'>
			<input type='radio' name='L_1' id='L_1_A' value='A'>
				<label for='L_1_A'>A</label>
			<input type='radio' name='L_1' id='L_1_B' disabled='disabled' value='B'>
				<label for='L_1_B'>B</label>
			<input type='radio' name='L_1' id='L_1_C' value='C'>
                <label for='L_1_C'>C</label>
            </span>
			Item 1 can't go in B
		</li>
		<li id='L_2'>
			<span class='nojs'>
			<input type='radio' name='L_2' id='L_2_A' value='A'>
				<label for='L_2_A'>A</label>
			<input type='radio' name='L_2' id='L_2_B' value='B'>
				<label for='L_2_B'>B</label>
			<input type='radio' name='L_2' id='L_2_C' disabled='disabled' value='C'>
				<label for='L_2_C'>C</label>
			</span>
			Item 2 can't go in C
		</li>
		<li id='L_3'>
			<span class='nojs'>
			<input type='radio' name='L_3' id='L_3_A' value='A'>
				<label for='L_3_A'>A</label>
			<input type='radio' name='L_3' id='L_3_B' value='B'>
				<label for='L_3_B'>B</label>
			<input type='radio' name='L_3' id='L_3_C' value='C'>
				<label for='L_3_C'>C</label>
			</span>
			Item 3 can go in any list
		</li>
        <li id="L_4">
            <span class='nojs'>
                <input type="radio" name="L_4" id="L_4_A" value="A">
                    <label for="L_4_A">A</label>
                <input type="radio" name="L_4" id="L_4_B" class="B" checked="checked" value="B">
                    <label for="L_4_B">B</label>
                <input type="radio" name="L_4" id="L_4_C" disabled="disabled" value="C">
                    <label for="L_4_C">C</label>
            </span>
            Item 4 can't go in C
         </li>
		</ul>
	</td>
	<td class='js'>
		<ul id='L_B' class='L ui-sortable cat'>Selected - B</ul>
        <ul id='L_C' class='L ui-sortable cat'>Selected - C</ul>
	</td>
	</tr>
	</table>
</div>
</form>

CSS

ul {margin:0;list-style-type:none;padding:0;}
	ul.ui-sortable {height:150px;overflow:auto;border:1px solid silver;}
	ul.cat {height:72px;margin-bottom:2px;}
	ul.ui-sortable li {color:#3366cc;background-color:ivory;border:1px solid silver;margin:1px;}

JavaScript

$(function() {
    $("#L").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[0].checked = true;
        }
    }).disableSelection();
    $("#L_B").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[1].checked = true;
        }
    }).disableSelection();
    $("#L_C").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[2].checked = true;
        }
    }).disableSelection();
});
$(document).ready(function() {
    $('.B').closest('li').appendTo("#L_B");
    $('.C').closest('li').appendTo("#L_C");
    $('.nojs').hide();
    $('ul.ui-sortable').width("10em");
    $('ul.ui-sortable li').css({cursor:'pointer'});
});