动态地将行添加到具有表单的引导表中;

Question

我有一个这样的引导表。现在我希望这个表在单击一个按钮后添加两行，并且仍然具有表单功能，即我应该能够为表colums提供一个唯一的名称，以便能够在我的控制器中读取它。我见过的所有解决方案都没有为添加的行保留唯一的名称。我怎么能这样做？

<form class="form-horizontal" role="form" action="updateCategory" method=POST>
<div class="table-responsive">
        <table class="table table-bordered table-striped table-highlight">
        <tr>
        <th style="width:15%" >Property</th>
        <th style="width:40%">Present Value</th>
        <th style="width:45%">Edited Value</th>
        </tr>
        <tr>
        <td align="center"><strong>Id</strong></td>
         <td><p class="text-danger" id="id1">Id</p></td>
        <td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id"></td>
		</tr>
		<tr>
        <td align="center"><strong>Cat Key</strong></td>
<!--         <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey"></td> -->
       <td><p class="text-danger" id="catKey1">Cat Key</p></td>
 		 <td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey"></td>
		</tr>
		<tr>
        <td align="center"><strong>Name</strong></td>
        <td><p class="text-danger" id="name1">Name</p></td>
        <td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
		</tr>
		<tr>
        <td align="center"><strong>Icon</strong></td>
         <td><p class="text-danger" id="icon1">Icon</p></td>
        <td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
		</tr>
		<tr>
        <td align="center"><strong>Icon White</strong></td>
        <td><p class="text-danger" id="iconWhite1">Icon White</p></td>
         <td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
		</tr>
        <tr>
        <td align="center"><strong>Color</strong></td>
         <td><p class="text-danger" id="color1">Color</p></td>
        <td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
		</tr> 
        <tr>
        <td align="center"><strong>Post Order Success Message</strong></td>
        <td><p class="text-danger" id="posm1">Post Order Success Message</p></td>
        <td><input type="text" class="form-control" id="posm" name="posm" placeholder="Enter Post Order Success Message"></td>
        </tr>
     <tr>
     <td colspan="3" align="center">
		<div class="form-group">
			<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
		</div>
		</td>
		  </tr>
</table>
</div>
	</form>

`