使用javascript

Question

我正在从事小型库存产品管理，并且想使用Javascript添加产品变体。我已经厌倦了在Google上查找和编写不正确的代码。我需要帮助，并且想基于shopify之类的标签创建一个HTML变体表。

这是我的Javascript代码：

$('.tags').on('change', function(event){
row = '';
$('.tags').each(function(index, element){
    for(i = 0; i < element.value.split(",").length; i++) {
        row += '<tr>';
        row + '<td>'+ element.value +'</tr>';
        row + '<td><input type="text"></tr>';
        row + '<td><input type="text"></tr>';
        row += '</tr>';
    }
});
$('#mytable').append(row); });

HTML代码：

<div class="row">
    <div class="col-lg-12">
        <label class="mb-0"><strong>Option 1:</strong></label>
    </div>
    <div class="col-lg-4">
        <div class="form-group">
            <input type="text" class="form-control" name="variant[attribute]" placeholder="Color">
        </div>
    </div>
    <div class="col-lg-8">
        <div class="form-group">
            <input type="text" class="form-control tags tokenfield" name="variant[value]" value=""><br>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <label class="mb-0"><strong>Option 2:</strong></label>
    </div>
    <div class="col-lg-4">
        <div class="form-group">
            <input type="text" class="form-control" name="variant[attribute]" placeholder="Size">
        </div>
    </div>
    <div class="col-lg-8">
        <div class="form-group">
            <input type="text" class="form-control tags tokenfield" name="variant[value]" value=""><br>
        </div>
    </div>
</div>

这是我想要的表的图像：

谢谢。