添加和删​​除具有关联数字输入值的文本字段

Question

我有一组数字输入字段，标记为 small & medium，以及一组带有 small and medium 标签的 div。 当您将数字添加到小数字输入字段时，应在标记为小的 div 之后插入文本输入。当您从小数输入字段中减去一个数字时，应删除最近添加的文本输入字段。文本输入的添加和删除应该是列表中的最后一个。

当您删除一个文本字段时，它应该只删除具有相关大小的文本字段。

现在我的脚本正在新生成的输入的顶部添加文本输入字段（我知道它是这样发生的，因为我的脚本说 insertAfter 标签，所以它总是会在顶部添加一个输入，但是我不想那样）。

现在它正在删除存在的最后一个输入，而不是关联大小的最后一个输入。

Code here

当你填写输入时，更容易看到我在说什么（a、b、c 在添加它们之后查看哪个被删除以及它们被添加到哪里）。

这对我来说用语言解释起来很复杂，但是当你看小提琴时，它可能会变得更清楚。如果您需要我解释其他内容，请询问。

脚本：

$('.product-quantity').each(function() {
    $(this).data('val', this.value);
}).on('change', function () {
            var val = $(this).val(),
                    old = $(this).data('val'),
                    ele = $(this).closest('[id^="product"]').find
            ('[data-size="'+this.name+'"]'),
                    inc = val >= old;

            if (inc) {
                $('<input/>', {'class': 'name-number-field'} ).insertAfter(ele);
            }else {
                $('.name-number-field', ele.parent()).first().remove();
            }

            $(this).data('val', this.value);
        });

Answer 1

可能是这样的

$('.product-quantity').each(function () {
    $(this).data('val', this.value);
}).on('change', function () {
    var val = $(this).val(),
        old = $(this).data('val'),
        ele = $(this).closest('[id^="product"]').find('[data-size="' + this.name + '"]'),
        inc = val >= old;

    if (inc) {
        $('<input/>', {
            'class': 'name-number-field'
        }).insertAfter(ele.nextUntil('div').last().length ? ele.nextUntil('div').last() : ele);
    } else {
        ele.nextUntil('div').last().remove();
    }

    $(this).data('val', this.value);
});

FIDDLE