создать таблицу вариантов, используя JavaScript

Question

Я работаю над управлением небольшими запасами продуктов и хочу добавить вариацию продуктов, используя Javascript. Я устал искать в Google и писать неправильный код. Мне нужна помощь, и я хочу создать таблицу вариантов HTML на основе таких тегов, как shopify.

Это мой код 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>

Это изображение таблицы, которое я хочу иметь:

Спасибо.