Javascript 使用JS创建两个带有输入占位符文本的新输入字段

现在我有一个脚本，它创建了一个带有类名数字字段的输入字段

但是，我需要一个脚本来创建两个具有display:inline的输入字段，并且两个输入字段在字段内都有占位符文本

以下是我现在拥有的：

$(document).ready(function() {
$('.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',  
                     'type':'text'}).insertAfter(ele);
            }else {
                $('.name-number-field', ele.parent()).first().remove();
            }

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

我试图做到这一点：

$('<input/> <input/>', {'class': 'name-number-field', 'type': 'text'}).insertAfter(ele);

它创建了两个字段，但是当我添加第二个输入时，我的脚本没有删除它们。我之所以这样假设是因为第二个输入没有一个名为number的类字段

也许我可以在一个div class name number字段中包含这两个输入，然后删除整个div类

---

我只是不确定这应该是什么样子。

我通过使用创建的div创建一个变量并在新创建的div中插入html来解决这个问题

$(document).ready(function() {
$('.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+'"]'),
                    input = $('<div/> ', {'class': 'name-number-field', 'type': 
'text'}).html('<input class=​"field" type=​"text"><input class=​"field" type=​"text">​'),
                    inc = val >= old;

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

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