JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="wrapper">
            <ul id="items">
    <li>foo</li>
    <li>bar</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>amet</li>
</ul>
            <button id="addItem">add item</button>
            <button id="addItem2">destroy + add item + create</button>
            <button id="addItem3">add item + addClass</button>
        </div>
    </body>
</html>

CSS

html{font-family:sans-serif}

li{border:2px solid red; padding:5px}
button{margin:2em 1em}

.ui-selectee{border: 2px solid green}
.ui-selected{background-color:green; color:#fff}

JavaScript

function init(){
    $('#addItem').click(addItem);
    $('#addItem2').click(addItem2);
    $('#addItem3').click(addItem3);
    $('#items').selectable();
}

function addItem(){
    $('#items')
        .append( getNextItem() )
        .selectable('refresh');
    // I would expect the new li to have 'ui-selectee' class.
    // note that "refresh" don't need to be called, since 
    // 'autoRefresh' is `true` by default, calling it just to prove
    // it doesn't solve the problem.
}

function addItem2(){
    $('#items')
        .selectable('destroy')
        .append( getNextItem() )
        .selectable();
    // destroying and creating a new selectable does work as expected
    // BAD APPROACH, DON'T USE IT !!
}

function addItem3(){
    getNextItem()
        .addClass('ui-selectee')
        .appendTo('#items');
    // 'autoRefresh' is true by default so it don't need to be called
}

var count = 0;

function getNextItem(){
    //not using `$.fn.clone()` to make sure selectable is
    //working and simply not adding class 'ui-selectee'
    return $('<li>'+ $('li').eq( count++ ).text() +'</li>');
}

$(document).ready(init);