JQuery clone div внутри формы

Question

Я пытаюсь дублировать div с его содержимым, внутри формы. Но каждый раз он клонирует вне формы.

<form> 
    <div class="avail" style="border:1px solid #cccccc; padding:3px;"> 
     <div id="id">Tip dispozitiv: 
      <select name="tip" id="tip" class="tip" cnt="senzori"> 
       <option value="NA" selected="selected">---</option> 
      </select> 
      <br/> 
      <select id="senzori" name="senzori" style="border:1px solid #cccccc;"> 
       <option selected="selected">---</option> 
      </select>x 
      <input type="text" name="ctr_bucati" size="2" value="1">Bucati 
      <div style="display:inline-block; margin-left:300px;"><a href="#" id="rem" class="rem">X</a> 
      </div> 
     </div> 
    </div> 
</form> 
<input type="submit" value="+" id="copy" /> 

$("#copy").click(function (e) { 
    var avails = $(".avail"); 
    var cnt = avails.length + 1; 
    avails.eq(0).clone().insertBefore(this).find("div").attr("id", "id" + cnt).find("#senzori").attr("id", "senzori" + cnt); 
    $("#id" + cnt).find("#tip").attr("cnt", "senzori" + cnt); 
    $("#senzori" + cnt).find('option').remove().end().append('<option value="NA">---</option>').val('NA'); 
    e.preventDefault(); 
}); 

Любой ключ, как я могу сделать его пребывание в той же форме, а не одеколон после?

Answer 1

вместо использования insertBefore(this)

использование .appendTo(avails.parent())

WORKING DEMO

Answer 2

добавить идентификатор в форму и добавьте DIV в форму

<form id="myform"> 

var myDiv = $(".avail"); 

$("#myform").append(myDiv); 

Answer 3

Или вы можете изменить HTML, а не JS, переместив кнопку «+» в форму:

<form> 
    <!-- ... --> 
    <input type="submit" value="+" id="copy" /> 
</form> 

Демо:http://jsfiddle.net/yoxn0j4g/