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

Question

我有一组数字输入字段，标记为小＆amp;中等，以及一组带有中小标签的div。 当您向小数字输入字段添加数字时，文本输入应插入标记为小的div之后。从小数字输入字段中减去数字时，应删除最近添加的文本输入字段。添加和删​​除文本输入应该是列表中的最后一个。

删除文本字段时，只应删除具有相关大小的文本字段。

现在我的脚本是在新生成的输入的顶部添加文本输入字段（我知道它是以这种方式发生的，因为我的脚本说插入标签之后，所以它总是在顶部添加输入，但是我不希望这样。）

此外，它现在正在移除最后一个输入，而不是相关大小的最后一个输入。

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