使用 javascript 在按钮单击上添加文本框

以下代码将在单击事件上添加新的文本框，但是当我单击提交按钮后，新添加的文本框不会保存。 请解决这个问题。

html

<table class="form-table">
    <tr valign="top">
        <td id="container_width">
            <input type="text" name="width" placeholder="" />
        </td>

        <td id="container_height">
            <input type="text" name="height"placeholder="" />
        </td>

        <td>
            <input type="button" name="increment" id="increment" value="+">
        </td>
    </tr>

    <tr>
        <td>
            <input type="submit" value="Save settings"/>
        </td>
    </tr>
</table>


//javascript

$('#increment').click(function(){
    var width = document.getElementById("container_width");
    var input;
    input = document.createElement("input");
    input.type = "text";
    input.name ="width[]";
    var br = document.createElement("br");
    width.appendChild(br);
    width.appendChild(input);

    var height = document.getElementById("container_height");
    var input;
    input = document.createElement("input");
    input.type = "text";
    input.name ="height[]";
    var br = document.createElement("br");
    height.appendChild(br);
    height.appendChild(input);
});

将 [] 添加到初始文本输入名称。这应该可以解决问题：

<input type="text" name="width[]" placeholder="" />

and

<input type="text" name="height[]" placeholder="" />