Javascript 使用相同的jQuery函数，但在HTML中导致冲突

标题-很抱歉，我很难解释这个标题

因此，我最近完成了使用jQuery开发动态字段系统的工作。这一切都是伟大的工作，但我想重复使用的html系统在同一页上一遍又一遍，这会导致问题

问题 -当您在同一页面上有表单的副本，并且您按下“Add Field”（添加字段）时，它将运行函数并将函数应用于页面上的其他类。（例如，请参见小提琴。）

当您在DOM上只有一个表单时，它工作得很好，但是我想稍微修改一下html，以便在页面上的不同场景中使用它。我不想用单独的jQuery文件来完成这项工作，因为我认为这是不必要的。我在想也许我可以把目标对准它的父容器，而不是直接指向类？然后我可以回收同样的代码，也许

对这家伙有什么建议吗

HTML:

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button class="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1">
        <input type="button" class="duplicate" value="duplicate">
        <input type="button" class="remove" value="remove">
    </div>
</form>

$(document).ready(function () {
    'use strict';
    var input = 1,
        blank_line = $('.input_line'),
        removing = false;

    $('.remove').hide();

    $('.add').click(function () {
        var newElement = blank_line.clone(true).hide();
        $('form').append(newElement);
        $(newElement).slideDown();
        $('.remove').show();
    });

    $('form').on('click', '.duplicate', function () {
        $(this).parent().clone().hide().insertAfter($(this).parent().after()).slideDown();
        $('.input_line').last().before($('.add'));
        $('.remove').show();
        input = input + 1;
    });

    $('form').on('click', '.remove', function () {
        if (removing) {
            return;
        } else {
            if ($('.input_line').length <= 2) {
                $('.remove').hide();
            }
            $(this).parent().slideUp(function () {
                $(this).remove();
                removing = false;
            });
            $('.input_line').last().before($('.add'));
            input = input - 1;
        }
        removing = true;
    });
});

添加字段

JQUERY:

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button class="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1">
        <input type="button" class="duplicate" value="duplicate">
        <input type="button" class="remove" value="remove">
    </div>
</form>

$(document).ready(function () {
    'use strict';
    var input = 1,
        blank_line = $('.input_line'),
        removing = false;

    $('.remove').hide();

    $('.add').click(function () {
        var newElement = blank_line.clone(true).hide();
        $('form').append(newElement);
        $(newElement).slideDown();
        $('.remove').show();
    });

    $('form').on('click', '.duplicate', function () {
        $(this).parent().clone().hide().insertAfter($(this).parent().after()).slideDown();
        $('.input_line').last().before($('.add'));
        $('.remove').show();
        input = input + 1;
    });

    $('form').on('click', '.remove', function () {
        if (removing) {
            return;
        } else {
            if ($('.input_line').length <= 2) {
                $('.remove').hide();
            }
            $(this).parent().slideUp(function () {
                $(this).remove();
                removing = false;
            });
            $('.input_line').last().before($('.add'));
            input = input - 1;
        }
        removing = true;
    });
});

$（文档）.ready（函数（）{
"严格使用",；
变量输入=1，
空白行=$（'.输入行'），
删除=假；
$（'.remove'）.hide（）；
$（'.add'）。单击（函数（）{
var newElement=blank_line.clone（true.hide（）；
$（'form'）.append（新元素）；
$（新元素）.slideDown（）；
$（'.remove'）.show（）；
});
$（'form'）。在（'click'，'duplicate'，函数（）{
$（this.parent（）.clone（）.hide（）.insertAfter（$（this.parent（）.after（））.slideDown（）；
$（'.input_line'）.last（）.before（$（'.add'））；
$（'.remove'）.show（）；
输入=输入+1；
});
$（'form'）。在（'click'，'remove'，函数（）上{
如果（正在删除）{
返回；
}否则{
如果（$（'.input_line'）.length您需要使用最近的（'form'）来查找关联的表单。此外，在查找其他字段时，您还需要在相关表单的上下文中进行搜索

函数addLine（$inputLine）{
var$form=$inputLine.closest（'form'）；
var$newElement=$inputLine.clone（true.hide（）；
$newElement.insertAfter（$inputLine）；
$newElement.slideDown（）；
$form.find（'.remove'）.show（）；
}
$（文档）.ready（函数（）{
"严格使用",；
$（'.remove'）.hide（）；
$（'.add'）。单击（函数（）{
addLine（$（this.nexist（'form'）。find（'input_line:last'））；
});
$（'form'）。在（'click'，'duplicate'，函数（）{
addLine（$（this）.closest（'.input_line'）；
});
$（'form'）。在（'click'，'remove'，函数（）上{
var$inputLine=$（this）.closest（'.input_-line'）；
var$form=$inputLine.closest（'form'）；
if（$form.find（'.input_line'）。长度<3）{
$form.find（'.remove'）.hide（）；
}
$inputLine.slideUp（函数（）{
$inputLine.remove（）；
});
});
});

退出该功能。
您可能会想用小提琴来演示这一点。请不要在描述问题时使用“您”，这可能会让许多读者感到沮丧。请使用“I”或被动语态。我使用
closest（）使小提琴的“添加字段”按钮起作用
：。好的，我以后问问题时一定要记下。你介意解释一下这到底是怎么回事吗？我注意到你添加了
eq（0）
在我以前从未见过的第4行？现在似乎一次添加了两行输入？在大多数情况下，除了“删除”按钮外，这似乎都能正常工作。如果你检查我的工作小提琴，你无法删除第一个输入，但这项功能似乎是通过你对代码的编辑来实现的？是的，非常有趣，哈哈，还有chang当你对“删除”按钮发送垃圾邮件时，你可以删除所有元素。在我的工作小提琴上，你不能这样做。垃圾邮件仍然是一个问题？有一个7，但它只是一个小的重构。