Добавить div к определенному элементу

Question

Я пытаюсь показать сообщение под элементом списка-списка при щелчке значка. Это код, я должен показать мой список

<ul class="list-group"> 
<li class="list-group-item">Feed dog <span class="edit glyphicon glyphicon-edit" data-id="1"></span></li> 
<li class="list-group-item">Email work <span class="edit glyphicon glyphicon-edit" data-id="2"></span></li> 
</ul> 

Иконка нажмите детектируется с этим кодом

$("li").on("click", ".edit", function() { 
    var id = $(this).data("id"); 
    //do something 
}) 

код я хочу использовать это ниже, но я не знаю, как выбрать правильный элемент

$(".list-group data1").append("<li id=\"detailsitem\" class=\"list-group-item list-group-item-info\">To be appended</li>"); 

Таким образом, если идентификатор = 1, то будет показано ниже первого ли, если идентификатор = 2 показать ниже второй и т.д.

Как я могу убедиться, что сообщение вставлено под правильным ли?

Answer 1

Как я могу убедиться, что сообщение вставляется ниже правильного литий? нажатая Ли и где вы хотите разместить этот результат должен иметь тот же идентификатор, следующий пример, добавьте поле идентификатора Ли, например:

<li class="list-group-item" id="1">Feed dog <span class="edit glyphicon glyphicon-edit" 


    id="1"> 

    </span></li> 

    <script> 
    $('.list-group-item').click(function(){ 


    var id=$(this).attr(id); // get the id of the clicked div 
$('.box#'+id).append('whatever');</script> // append whatever you want to the div with same id as the clicked div 

Answer 2

Вы можете сделать так:

$('.edit').click(function(){ 

     $(this).parent().after('<li id=\"detailsitem\" class=\"list-group-item list-group-item-info\">To be appended</li>') 

});