Javascript 使用JQuery动态添加和删除div？

我正在尝试创建一个表单，允许用户输入他们的经验和教育

我希望用户能够添加和删除教育或经验

我能做到这一点。。。某种程度上。唯一的问题是我正在创建的新div被追加到页面的末尾，而不是追加到上一个div之后

以下是我的脚本：

    $(document).ready(function() {
        var inputs = 1;

        $('#btnAdd').click(function() {
            $('.btnDel:disabled').removeAttr('disabled');
            var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name', 'input' + (++inputs));
            $('.clonedInput:last').after(c);
        });

        $('.btnDel').click(function() {
            if (confirm('continue delete?')) {
                --inputs;
                $(this).closest('.clonedInput').remove();
                $('.btnDel').attr('disabled', ($('.clonedInput').length < 2));
            }
        });
    });
    $(document).ready(function() {

        var inputs = 1;

        $('#btnAdd2').click(function() {
            $('.btnDel2:disabled').removeAttr('disabled');
            var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name', 'input' + (++inputs));
            $('.clonedInput:last').after(c);
        });

        $('.btnDel2').click(function() {
                --inputs;
                $(this).closest('.clonedInput').remove();
                $('.btnDel2').attr('disabled', ($('.clonedInput').length < 2));
        });
    });

$（文档）.ready（函数（）{
var输入=1；
$（'#btnAdd'）。单击（函数（）{
$（'.btnDel:disabled'）.removeAttr（'disabled'）；
var c=$（'.clonedInput:first'）.clone（true）；
c、 子项（':text'）.attr（'name'，'input'+（++inputs））；
$（'.clonedInput:last'）。在（c）之后；
});
$（'.btnDel'）。单击（函数（）{
如果（确认（'继续删除？'））{
--投入；
$（this）.closest（'.clonedInput'）.remove（）；
$（'.btnDel'）.attr（'disabled'，（$（'.clonedInput'）.length<2））；
}
});
});
$（文档）.ready（函数（）{
var输入=1；
$（'#btnAdd2'）。单击（函数（）{
$（'.btnDel2:disabled'）.removeAttr（'disabled'）；
var c=$（'.clonedInput:first'）.clone（true）；
c、 子项（':text'）.attr（'name'，'input'+（++inputs））；
$（'.clonedInput:last'）。在（c）之后；
});
$（'.btnDel2'）。单击（函数（）{
--投入；
$（this）.closest（'.clonedInput'）.remove（）；
$（'.btnDel2'）.attr（'disabled'，（$（'.clonedInput'）.length<2））；
});
});

我理解像这样复制代码是不好的，但我不知道该怎么做，这样单击add按钮就不会被按到错误的div

我的html是：

<form id="myForm">
        <h2>Education</h2>
        <p>Please add all of your education</p>
        <div style="margin-bottom: 4px; border: 2px solid; border-style: dashed" class="clonedInput">

            Level: <select>
                <option value="secondary">Secondary</option>
                <option value="someps">Some Post Secondary</option>
                <option value="college">College</option>
            </select> <br /> <br />
    Did you receive a degree, diploma or certificate?<br />
        <select>
            <option value="certificate">Certificate</option>
            <option>Diploma</option>
            <option value="degree">Degree</option>
        </select> <br />
        <input type="button" class="btnDel" value="Remove Education" disabled="disabled" />
    </div>
    <div>
        <input type="button" id="btnAdd2" value="add Education" />
    </div>

    <h2>Experience</h2>
    <p>Please add all of your experience</p>
    <div style="margin-bottom: 4px; class="clonedInput">

        Position title: <input type="text"><br /> Years at position:
        <input type="number"><br />
        Responsibilities: <input type="text"><br /> 
        <input type="text"><br /> 
        Type: <select>
            <option>Accounting, banking and Finance</option>
            <option>Publishing & Journalism</option>
            <option>Social Care & guidance work</option>
        </select>
        <input type="button" class="btnDel2" value="Remove Experience"
            disabled="disabled" />
    </div>

    <div>
        <input type="button" id="btnAdd2" value="add Experience" />
    </div>
</form>

教育类
请加上你所有的学历

级别：
次要的
一些专上教育
学院



您是否获得学位、文凭或证书？

证明书
文凭
度


经验
请添加您的所有经验

首先，为什么您有2x
$（document）.ready
？将代码合并为一个

您的重复div出现在表单末尾的原因是，您的教育和经验div都有
class=“clonedInput”
，因此
$（'.clonedInput:last'）。在（c）
之后会将重复div放置在经验部分之后（恰好是与
.clonedInput
选择器匹配的最后一个div）

解决方案是为这些div集合中的每一个赋予它们自己唯一的类名，例如分别为
eduint
和
expInput
。
因此，更正后的代码为：

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.eduInput:first').clone(true);
        c.children(':text').attr('name', 'input' + (++inputs));
        $('.eduInput:last').after(c);
    });

教育组

为了清理您的代码，我建议将两个Add按钮绑定到同一个处理程序，但通过检查目标参数并确定要复制的集合（教育或经验），对它们采取不同的操作。例如：

    // single handler and click event for both buttons

    var clickHandler = function (e) {
        // determine which btnAdd was clicked, such as e.getAttribute('id')
    }

    $('.btnAdd').click(clickHandler); 

但是认真地说，你应该清理一下你的代码。
首先，为什么你有2x
$（文档）。准备好了吗？
？将你的代码合并成一个

您的重复div出现在表单末尾的原因是，您的教育和经验div都有
class=“clonedInput”
，因此
$（'.clonedInput:last'）。在（c）
之后会将重复div放置在经验部分之后（恰好是与
.clonedInput
选择器匹配的最后一个div）

解决方案是为这些div集合中的每一个赋予它们自己唯一的类名，例如分别为
eduint
和
expInput
。
因此，更正后的代码为：

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.eduInput:first').clone(true);
        c.children(':text').attr('name', 'input' + (++inputs));
        $('.eduInput:last').after(c);
    });

教育组

为了清理您的代码，我建议将两个Add按钮绑定到同一个处理程序，但通过检查目标参数并确定要复制的集合（教育或经验），对它们采取不同的操作。例如：

    // single handler and click event for both buttons

    var clickHandler = function (e) {
        // determine which btnAdd was clicked, such as e.getAttribute('id')
    }

    $('.btnAdd').click(clickHandler); 

但说真的，你应该清理一下你的代码