Клонировать родительский div

Question

У меня есть требование добавить несколько полей ввода для ввода данных. Первоначально будет только одно поле ввода, и рядом с каждым сгенерированным полем ввода будет кнопка «Добавить», чтобы создать несколько текстовых полей.

Если вы посмотрите на мою скрипку, на 1-м уровне есть 3 уровня текстовых полей, у нее есть возможность ввести только 1 уровень данных, но когда дело доходит до уровня 2, должна быть возможность создать второй уровень одного и того же родителя чтобы мы могли ввести вспомогательные данные основного заголовка. Например если я пишу название штата, то я должен быть в состоянии войти подкатегории ..

Вот код для меню 1-го уровня

$(document).ready(function(){ 

    $(":radio").click(function(){ 
     $(".test").hide(); 
     var show = $(this).attr("data-show"); 
     $("#"+show).show(300) 
    }); 
     $('.sort').hide(); 
     $filtr = $('.filtr'); 

     $filtr.on('click', '.add', function(){ 
      $(this).closest('.loop').clone().appendTo($(this).closest('.test')); 

      $('.sort').show(); 
     }); 

     $filtr.on('click', '.del', function(){ 
      $(this).closest('.loop').remove(); 
     }); 

     $('#1lev, #2lev, #3lev').hide(); 

    //For sort up/down 
    function moveUp(item) { 
    var prev = item.prev(); 
    if (prev.length == 0) 
     return; 
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function() { 
     prev.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertBefore(prev); 
    }); 
} 
function moveDown(item) { 
    var next = item.next(); 
    if (next.length == 0) 
     return; 
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function() { 
     next.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertAfter(next); 
    }); 
} 

$(".filtr").sortable({ items: ".loop", distance: 10 }); 
$(document).on("click", "button.sort", function() { 
    var btn = $(this); 
    var val = btn.val(); 
    if (val == 'up') 
     moveUp(btn.parents('.loop')); 
    else 
     moveDown(btn.parents('.loop')); 
}); 

}); 

FIDDLE

Необходимого результат

Как клонировать class="filtr" div как панель второго уровня, которая работает точно так же, как панель 1-го уровня?

Answer 1

Используйте функцию jquery clone для этого

как,

newfiltr=$('.filtr').clone(); 
//Append newfiltr where you want 

Docs http://api.jquery.com/clone/

Обновлено

Вы пробовали это,

$('button.level').on('click',function(){ 
    var $parent=$(this).closest('.filtr'); 
    var $clone=$parent.clone(); 
    $parent.after($clone); 
}); 

Второй обновленный

Try,

$('button.level').on('click',function(){ 
    var $parent=$(this).closest('.filtr'); 
    var $clone=$parent.clone(); 
    $clone.find('button.level').remove(); 
    $parent.after($clone); 
});