Add a dynamic div on click

Question

I have a requirement to add multiple input boxes to enter the data. Initially there will be only one input box and there is an "Add" button next to each generated input boxes to generate multiple text boxes.

If you look at my fiddle there are 3 levels of text boxes in 1st level it has option to enter only 1 level of data but when it comes to level 2, there should be an option to create second level of same parent block so that we can enter the sub data of the main heading. For example If I write State name then I should be able to enter sub categories..

Here is the code for the 1st level menu

$(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

Required result

How to clone the class="filtr" div as second level panel which works exactly the same as 1st level panel?

Expected code structure should be like this

    <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

Here it is jsfiddle.net/VMBtC/28

code

But i dont think clone is best solution for this, at least clone template not active element.But this code still need alot of work.