每次点击jQuery clone div

Question

我有一个简单的表单,并有一个按钮来单击时克隆我的表单.问题是,当我第一次点击按钮时,它工作正常,但是下次它点击时附加了很多div.有没有办法每次点击一个一个地复制？这是我的片段:

$(document).ready(function() {
    $(".Add").click(function() {
        $(".formi").clone().insertAfter(".formi:last");
    });
});

.formi {
    border: 1px solid #000;
    width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
    <form class="formi">
        <input type="text" placeholder="name" />
        <select name="cars">
            <option value="">one</option>
            <option value="">two</option>
        </select>
        <button type="submit">ok</button>
    </form>
</div>

Answer 1

你可以找到第一个表单而不是在DOM中查找所有表单eq(0)或找到最近的表单,

$(document).ready(function(){
    $(".Add").click(function(){
		  $(".formi").eq(0).clone().insertAfter(".formi:last");
//$(".formi:last").clone().insertAfter(".formi:last");
    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>