Динамический вложенный список: вставить строку на клик, после текущего элемента

Question

Я борюсь со списком, который можно перетаскивать и вставлять.

Как это должно работать:

1. Каждая строка имеет кнопку «добавить строку».
2.Когда эта кнопка нажата, я пытаюсь вставить новую строку, которая является текстовым полем, непосредственно под/после элемента, где была нажата кнопка.
3. Затем получите/добавьте уникальный идентификатор для нового элемент/строка.
4.После ввода текста в текстовом поле новых элементов получите текст (для отправки на сервер).

Javascript будет выглядеть так:

$ (документ) .он ('щелчок', '#addLabel_Item', функция() {

var tree_id = ($(this).prop("title")); 
    var $tree_box = '#' + tree_id; 
    var $tree_box_item = '#' + tree_id + ' li'; 

    var currentListItem = $(this).closest(".listed").attr("id"); 
    var $items=$('.listed'); 
    var parentID = $items.index($(this).closest(".listed")); 

    $("#list_reference_2").show(); 
    //$("#list_reference_2").clone(true).insertAfter($("li").closest("ol#top_list_items li:eq(" + parentID + ")")); 
    //$("#list_reference_2").clone().insertAfter('ol > li:nth-child(1)'); 
    $("#list_reference_2").clone().insertAfter("ol li:eq(" + parentID + ")"); 


}); 

Прямо сейчас, если я нажимаю добавить новая строка добавляет правильное место на начальном/первом нажатии кнопки. Однако при последующем нажатии на другую кнопку добавляются строки под начальной/первой строкой, а не под текущей, только что щелкнутой.

Fiddle показывает, что это

Извинения, если мои объяснения сбивают с толку, я немного сбиваю с толку :-) Любая помощь или точка в правильном направлении были бы очень признательны.

Answer 1

Вы можете добавить строки таким образом:

$(document).on('click', '#addLabel_Item', function() { 
    var $li = $(this).closest('.listed'); 

    $("#list_reference_2").show(); 
    $li.after($("#list_reference_2").clone().removeAttr('id')); 
    $("#list_reference_2").hide(); 
}); 

JSFiddle: http://jsfiddle.net/tx7hbkjL/15/

PS: Посмотрите на ваши повторяющиеся идентификаторы, как #addLabel_Item. Идентификаторы должны быть уникальными на странице, вместо этого используйте класс.

Попробуйте и дайте мне знать, если это поможет!