JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryui.com/ui/jquery.ui.selectable.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<ul id="selectable">
    <li rel="group1">Item 1 (Group 1)</li>
    <li rel="group1">Item 2 (Group 1)</li>
    <li rel="group2">Item 3 (Group 2)</li>
    <li rel="group2">Item 4 (Group 2)</li>
    <li rel="group3">Item 5 (Group 3)</li>
    <li rel="group3">Item 6 (Group 3)</li>
</ul>

CSS

ul { margin: 20px }
.enabled { background-color: #dfd }
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }

ul li {
    background-color: #ddd;
    padding: 2px 36px;
    margin: 2px;
    border: 1px dotted gray
}

JavaScript

function enableAll() {
    $('li').addClass('enabled');
    locked = false;
}

var locked = false;

$("#selectable").selectable({

    // allow only enabled items to be selected
    filter: '.enabled',

    selecting: function(event, ui) {
        
        if (!locked) {
            
            var group = $(ui.selecting).attr('rel');
            
            // disable all items belonging to other groups
            $("#selectable li[rel!='" + group + "']").removeClass('enabled');
            
            locked = true;
        } 
        
    },
    
    stop: function() {
        
        // this fixes selectable behavior 
        // (it ignores dynamically added filter while selecting)
        $(this).find('li.ui-selected:not(.enabled)').removeClass('ui-selected');
        
        // if no item is selected, then enable all groups
        if($(this).find('.ui-selected').length == 0) {
            enableAll();
        };
    }
    
});

// initialize
enableAll();