Как добавить кнопку «заменить» на каждый элемент моей сортировки JQuery

Question

Мне было интересно, как я могу поместить кнопку на каждый элемент в моей сортировке 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]); 

Но я не знаете, как его реализовать. Любая помощь будет оценена по достоинству. Благодаря!

Answer 1

Попробуйте это.

$("<li class='ui-state-default'/>").text(liArray[i]).append('<button>Button!</button>');