There is a list with text fields.

<input name="multiadd" type="button" value="добавить" class="btn add_many"/> <ul> <li> <textarea name="one"></textarea> </li> <li> <textarea name="two</textarea </li> </ul>

And the button, by pressing which all this html block is created again. Here is the js that does it. It focuses on the ul tags and creates 1 more copy of everything between them.

 $(".del").live("click",function(){ var ulcnt = $(this).parents("ul:first").prevAll(".add_many:first").nextUntil("h2").filter("ul").length; if(ulcnt>1){ var clul = $(this).parents("ul:first").remove(); }else{ $(this).parents("ul:first").find(':input:not(:button)').val(""); } }); $(".add_many").live("click",function(){ var clul = $(this).next("ul"); var nblock = clul.clone(); nblock.find(':input:not(:button)').val(""); clul.before(nblock); var nul = $(this).next("ul"); nul.find(".ui-datepicker-trigger").remove(); nul.find(".hasDatepicker").removeClass("hasDatepicker").removeAttr("id");

Can you tell me how to make him also make them with different names? Maybe he would simply attribute to them the number at the end:

 <textarea name="one"></textarea> - <textarea name="one(1)"></textarea> - <textarea name="one(2)"></textarea>

    1 answer 1

    Clone and immediately change the attribute to the one you need, for example, like this:

     $(function() { $(".add_many").on("click", function() { var line = $('ul li'); var lineLast = line.last(); lineLast.clone().find('textarea').attr('name', 'one_' + line.length).end().insertAfter(lineLast); }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input name="multiadd" type="button" value="добавить" class="btn add_many" /> <ul> <li> <textarea name="one"></textarea> </li> </ul>