Javascript 多输入内的多输入表单

多输入表单

名称
类别
巴基斯坦人
塞拉纳
凯梅加
股票
重构数据库以满足您的需求，相关表可能会有所帮助，您可以使用查询轻松获取所需的数据。还有另一种方法，您可以在（MySQL中使用json字段基于您的表设计，因此您可以将所谓的数组变量存储到数据库中，但这样做的缺点是在比较和关联数据的过程中，因为这将是一个混乱的过程。
请编写一些您试图解决问题的代码
<form method="post" action="input" enctype="multipart/form-data">
<div class="row">
    <div class="col-md">
        <div class="form-group">
            <label> Name </label>
            <input class="form-control" type="text" name="nama_barang" placeholder="Name">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md">
        <div class="form-group">
            <label for="exampleFormControlSelect1">Category</label>
            <select class="form-control" name="category" id="exampleFormControlSelect1">
              <option value="2">pakaian</option>
              <option value="3">celana</option>
              <option value="4">Kemeja</option>
            </select>
        </div>
    </div>
    <div class="col-md">
        <div class="form-group">
            <label> Stock </label>
            <input class="form-control" type="number" name="stok" placeholder="Stock">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <div id="ListType">
            <div id="typerow2" class="row">
                <div class="col">
                    <div class="form-group">
                        <input class="form-control" type="text" name="type[]" placeholder="Type Of Variant">
                    </div>
                    <div class="form-group">
                        <a id="typerow2" class="btn btn-danger btn_remove_type" style="color:white;">Remove</a>
                    </div>
                </div>
                <div class="col">
                    <div id="ListVariant2">
                        <div id="svariantrow4" class="row">
                            <div class="col">
                                <div class="form-group">
                                    <input class="form-control" type="text" name="variant[]" placeholder="Variant Name">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <a id="svariantrow4" class="btn btn-danger btn_remove_variant" style="color:white;">Del</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <input class="form-control" type="text" name="variant[]" placeholder="Variant Name">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <a id="ListVariant2" class="btn btn-success btn_add_type" style="color:white;">Add</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <input class="form-control" type="text" name="type[]" placeholder="Type Of Variant">
                </div>
                <div class="form-group">
                    <a id="AddType" class="btn btn-primary" style="color:white;">Add Type</a>
                 </div>
            </div>
            <div class="col">
                <div id="ListVariant"><div id="variantrow2" class="row"><div class="col"><div class="form-group"><input class="form-control" type="text" name="variant[]" placeholder="Variant Name"></div></div><div class="col"><div class="form-group"><a id="variantrow2" class="btn btn-danger btn_remove_variant" style="color:white;">Del</a></div></div></div></div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <input class="form-control" type="text" name="variant[]" placeholder="Variant Name">
                        </div>
                    </div>
                    <div class="col">
                         <div class="form-group">
                            <a id="AddVariant" class="btn btn-success" style="color:white;">Add</a>
                         </div>
                    </div>
                </div>
            </div>  
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <img id="blah" src="http://placehold.it/180" width="400px" alt="Image Upload" style="display: none;">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</div>