javascript - Jquery clone div inside form

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

有什么线索可以使它保持相同的形式而不是在 colone 之后吗？

Answer 1

而不是使用 insertBefore(this)

使用 .appendTo(avails.parent())

WORKING DEMO