动态添加输入文本字段并获取值到php并发送到mysql

Question

我创建了类似的附件，我有一些问题需要开发。底部的文本框是在按下添加文章按钮时动态创建的，现在我想更新“添加文章详细信息”部分插入到mysql数据库中，有时有5行，有时2行和1行也想添加。我命名文本框1,2,3,4,5,6 ......如何解决 我的Javascript

 function added_artic() {
    if (added_art) {
        document.getElementById('added_article').style.cssText = "display:block;";
        var art_name = document.getElementsByName('article_name')[0].value;
        var app = document.getElementsByName('appearance')[0].value;
        var weight = document.getElementsByName('weight')[0].value;
        var netWeight = document.getElementsByName('net_weight')[0].value;
        var qty = document.getElementsByName('qty')[0].value;
        var test = document.getElementsByName('test')[0].selectedOptions[0].text;

        var added = document.getElementById("added");


        var i_artname = document.createElement('input');
        i_artname.value = art_name;
        i_artname.name = "art_name" + art_name_id++;
        i_artname.id = "txt_added";
        i_artname.disabled = true;
        added.appendChild(i_artname);

        var i_app = document.createElement('input');
        i_app.value = app;
        i_app.name = "app" + app_id++;
        i_app.id = "txt_added";
        i_app.disabled = true;
        added.appendChild(i_app);

        var i_weight = document.createElement('input');
        i_weight.value = weight;
        i_weight.name = "weight" + weight_id++;
        i_weight.id = "txt_added";
        i_weight.className = "cal_weight";
        i_weight.disabled = true;
        added.appendChild(i_weight);

        var i_netweight = document.createElement('input');
        i_netweight.value = netWeight;
        i_netweight.name = "netWeight" + netWeight_id++;
        i_netweight.id = "txt_added";
        i_netweight.className = "cal_netWeight";
        i_netweight.disabled = true;
        added.appendChild(i_netweight);

        var i_qty = document.createElement('input');
        i_qty.value = qty;
        i_qty.name = "qty" + qty_id++;
        i_qty.id = "txt_added";
        i_qty.className = "cal_qty";
        i_qty.disabled = true;
        added.appendChild(i_qty);

        var i_test = document.createElement('input');
        i_test.value = test;
        i_test.name = "test" + test_id++;
        i_test.id = "txt_added";
        i_test.className = "cal_test";
        i_test.disabled = true;
        added.appendChild(i_test);

        var remove_btn = document.createElement('input');
        remove_btn.type = "button";
        remove_btn.value = "";
        remove_btn.id = "remove_btn";

        remove_btn.onclick = function ()
        {
            i_artname.parentElement.removeChild(i_artname);
            i_app.parentElement.removeChild(i_app);
            i_weight.parentElement.removeChild(i_weight);
            i_netweight.parentElement.removeChild(i_netweight);
            i_qty.parentElement.removeChild(i_qty);
            i_test.parentElement.removeChild(i_test);
            edit_btn.parentElement.removeChild(edit_btn);
            this.parentElement.removeChild(this);
            get_total();
            if (!document.getElementsByName("test1")[0] && !document.getElementsByName("test2")[0] && !document.getElementsByName("test3")[0] && !document.getElementsByName("test4")[0] && !document.getElementsByName("test5")[0] && !document.getElementsByName("test6")[0] && !document.getElementsByName("test7")[0] && !document.getElementsByName("test8")[0] && !document.getElementsByName("test9")[0] && !document.getElementsByName("test10")[0])
            {
                document.getElementById('added_article').style.cssText = "display:none;";
            }
        }
        added.appendChild(remove_btn);

        var edit_btn = document.createElement('input');
        edit_btn.type = "button";
        edit_btn.value = "";
        edit_btn.id = "edit_btn";

        var a = 'weight' + (weight_id - 1);
        var b = 'netWeight' + (netWeight_id - 1);
        var c = 'qty' + (qty_id - 1);
        edit_btn.onclick = function ()
        {
            document.getElementsByName(a)[0].disabled = false;
            document.getElementsByName(b)[0].disabled = false;
            document.getElementsByName(c)[0].disabled = false;
            edit_btn.style.cssText = "background-image: url('images/update.png');";

            edit_btn.onclick = function ()
            {
                document.getElementsByName(a)[0].disabled = true;
                document.getElementsByName(b)[0].disabled = true;
                document.getElementsByName(c)[0].disabled = true;
                edit_btn.style.cssText = "background-image: url('images/edit.png');";
                get_total();
            };
        };
        added.appendChild(edit_btn);

        document.getElementsByName('article_name')[0].value = "Article Name";
        document.getElementsByName('appearance')[0].value = "Appearance";
        document.getElementsByName('weight')[0].value = "";
        document.getElementsByName('net_weight')[0].value = "";
        document.getElementsByName('qty')[0].value = "";
        document.getElementsByName('test')[0].value = "Select You Tested Karatage type";

    }
}

我的项目屏幕截图 -