JQuery ソート可能の各項目にボタンを配置する方法を考えていました。現在、画面の上部に、オートコンプリートのユーザー入力をソート可能に追加するボタンがあります。ソート可能に新しいアイテムを追加する .js コードは次のとおりです。
$(".addButton").click(function(e) {
    e.preventDefault();
    // set var item to be the string inputted by the user
    var item = $("input[name='inputItem']").val(); //where 'inputItem' is the name of the <form> which contains the <input>
    // parses input string, splitting at commas into liArray containing substrings as elements
    var liArray = item.split(", ");
    // for loop to add each brew to the sortable list (length-1 because last element in array is empty string)
    for (var i = 0; i < liArray.length-1; i++) {
        // sets var $li to the string in the ith index of liArray
        var $li = $("<li class='ui-state-default'/>").text(liArray[i]);
        // adds var $li to gui
        $("#sortable").append($li);
    };
    $("#sortable").sort();
    // refreshes the page so var $li shows up
    $("#sortable").sortable("refresh");
});
私の考えは、次のようなものを追加することでした
<button>Button!</button> 
この行に:
var $li = $("<li class='ui-state-default'/>").text(liArray[i]);
しかし、それを正確に実装する方法がわかりません。どんな助けでも大歓迎です。ありがとう!