Add dynamic div on click

Question

I have a requirement to add several input fields for data entry. At the beginning there will be only one input field, and next to each generated input field there will be an “Add” button for creating several text fields.

If you look at my violin, at the 1st level there are 3 levels of text fields, it has the ability to enter only one level of data, but when it comes to level 2, there should be the possibility of creating a second level of the same parent block so that we can enter the auxiliary data of the main header. For example, if I write the name of the state, then I should be able to enter subcategories.

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

Desired Result

How to clone a class="filtr" div as a second-level panel that works exactly the same as a first-level panel?

The 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 don’t think that a clone is the best solution for this, at least the clone template is an inactive element. But this code still needs a lot of work.

Answer 2

You can try parentsUntil API to get filtr div

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

Answer 3

Another solution.

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)); });