增加html字段的id

Question

我在JavaScript中遇到问题。我想保存当我点击+按钮时添加的所有数据（添加到JavaScript html字段），但是当我点击提交按钮时，它将仅保存最后添加的值。我想在JavaScript html中添加行时获取删除按钮。

function updateForm() {
  var cate = document.getElementById("cid");
  var selp = cate.options[cate.selectedIndex].text
  var subj = document.getElementById("sid");
  var selq = subj.options[subj.selectedIndex].text
  var pro = document.getElementById("pid");
  var selr = pro.options[pro.selectedIndex].text
  var fini = document.getElementById("fid");
  var sels = fini.options[fini.selectedIndex].text
  var wid = document.getElementById("wid").value;
  var ht = document.getElementById("hid").value;
  var dep = document.getElementById("did").value;
  var table = document.getElementById("results");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  var cell7 = row.insertCell(6);
  cell1.innerHTML = selp;
  cell2.innerHTML = selq;
  cell3.innerHTML = selr;
  cell4.innerHTML = sels;
  cell5.innerHTML = wid;
  cell6.innerHTML = ht;
  cell7.innerHTML = dep;
}

<form action="insert.php" enctype="multipart/form-data" method="post">
  <div id="unique">
    <div class="form-group" style="display:inline-block;">
      <select name="category[]" onChange="catfunction();" id="cid" class="form-control">
        <option >--Choose Category--</option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
    </div>

    <td> -->
      <div class="form-group" style="display:inline-block;">
        <select name="sub[]" onChange="subfunction();" id="sid" class="form-control">
                                  <option>--Choose subcategory--</option></select>
      </div>
      <div class="form-group" style="display:inline-block;">
        <select name="product[]" id="pid" class="form-control">
          <option>--Choose Product--</option>
        </select>
      </div>
      <div class="form-group" style="display:inline-block;">
        <select name="finishes[]" id="fid" class="form-control">
          <option>--Choose Finishes--</option>
          <option value="A">A</option>
          <option value="B">B</option>
        </select>
      </div>
      <div class="form-group" style="display:inline-block;">
        <input type="text" name="width[]" value="" placeholder="width" class="form-control" id="wid"></div>
      <div class="form-group" style="display:inline-block;">
        <input type="text" name="height[]" value="" placeholder="height" class="form-control" id="hid"> </div>
      <div class="form-group" style="display:inline-block;">
        <input type="text" name="depth[]" value="" placeholder="depth" class="form-control" id="did"></div>
      <div class="form-group" align="center">
        <input type="reset" name="reset">
        <input type="button" value="+" onClick="updateForm()" id="btnid" />
      </div>
  </div>
  <div id="ex">
    <table id="results" width="1050" border="2">
      <thead>
        <tr>
          <th scope="col" width="120">Category</th>
          <th scope="col" width="120">Subcategory</th>
          <th scope="col" width="120">Product</th>
          <th scope="col" width="120">Finishes</th>
          <th scope="col" width="120">Width</th>
          <th scope="col" width="120">Height</th>
          <th scope="col" width="120">Depth</th>
        </tr>
      </thead>
    </table>
    <table id="resultTotals" width="360">
      <tr>
        <td scope="col" width="120"></td>
        <td scope="col" width="120">
          <div id="one"></div>
        </td>
        <td scope="col" width="120">
          <div id="two"></div>
        </td>
        <td scope="col" width="120">
          <div id="three"></div>
        </td>
        <td scope="col" width="120">
          <div id="four"></div>
        </td>
        <td scope="col" width="120">
          <div id="five"></div>
        </td>
        <td scope="col" width="120">
          <div id="six"></div>
        </td>
        <td scope="col" width="120">
          <div id="seven"></div>
        </td>
        <td scope="col" width="120">
          <div class=""></div>
        </td>
      </tr>
    </table>
    <input type="submit" value="Submit" name="save" align="center" />
    <span class="help-block"></span>
  </div>
  </div>
</form>