Aggiungere un div dinamico al clic

Question

Ho bisogno di aggiungere più caselle di input per inserire i dati. Inizialmente ci sarà una sola casella di input e accanto a ogni casella di input generata c'è un pulsante "Aggiungi" per generare più caselle di testo.

Se guardi il mio violino ci sono 3 livelli di caselle di testo nel 1 ° livello che ha l'opzione di inserire solo 1 livello di dati ma quando si tratta di livello 2, ci dovrebbe essere un'opzione per creare il secondo livello dello stesso genitore bloccare in modo che possiamo inserire i dati secondari dell'intestazione principale. Per esempio, se scrivo nome dello Stato, allora dovrei essere in grado di entrare categorie secondarie ..

Ecco il codice per il menu di livello 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

risultato richiesto

Come clonare class="filtr" div come pannello di secondo livello che funziona esattamente come il pannello di primo livello?

struttura del codice attesi dovrebbero essere come questo

<div class="filtr"> 
     <!-- we'll clone this one... --> 
     <div class="test" id="2lev"> 
     <div class="loop"> 
      <button value='up' class="sort">Up</button> 
      <button value='down' class="sort">Down</button> 
      <input type="text" /> 
      <button class="btn del">x</button> 
      <button class="btn add">Add</button> <button class="btn level">></button> 

<!--Need to add this div here--> 
      <div class="filtr"> 
     <!-- we'll clone this one... --> 
     <div class="test"> 
     <div class="loop"> 
      <button value='up' class="sort">Up</button> 
      <button value='down' class="sort">Down</button> 
      <input type="text" /> 
      <button class="btn del">x</button> 
      <button class="btn add">Add</button> 
     </div> 
     </div> 
     <!-- here ...--> 
    </div> 
<!--Need to add this div here--> 

     </div> 
     </div> 
     <!-- here ...--> 
    </div> 

Answer 1

Qui è jsfiddle.net/VMBtC/28

code 

Ma io non lo faccio clone hink è la soluzione migliore per questo, almeno il template clone non è attivo. Ma questo codice ha ancora bisogno di molto lavoro.

Answer 2

Si può provare l'API parentsUntil per ottenere il div filtr

http://api.jquery.com/parentsUntil/

Answer 3

Un'altra soluzione.

http://jsfiddle.net/VMBtC/17/

$filtr.on('click', '.level', function(){ 
      var c = $('<div class="filtr insideFiltr" style="padding-left:10px">'+ 
      '<div class="test" id="4lev">' + 
      '<div class="loop">'+ 
       '<button value="up" class="sort">Up</button>'+ 
       '<button value="down" class="sort">Down</button>'+ 
       '<input type="text" />'+ 
       '<button class="btn del">x</button>'+ 
        '<button class="btn add">Add</button>'+ 
      '</div>'+ 
       '</div>'+ 
      '</div>'); 

      c.insertAfter($(this)); 


     });