How to add multiple column in a table on a button action - html

Question

I have a table were I want to add multiple columns with values when I click an add button. I have a drop down of Rulelist after selecting rule I have a button that rule pass to the controller search the object of that particular rule and display in a table. Now I am facing a problem after adding one column when I want to add another the first column gets removed.
Html
<form:form action="/update" method="post" id="ruleListForm" modelAttribute="ruleListContainer">
<table border="1">
<thead>
<h3 align="center">Selected Rule</h3>
<tr>
<th data-field="id" width="25"> ID </th>
<th data-field="details" width="20">RuleName</th>
<th data-field="details" width="10">StartDate</th>
<th data-field="details" width="10">EndDate</th>
<th data-field="parameter" width="240">Parameter </th>
</tr>
</thead>
<tbody id="ruleListContainer">
<c:forEach items="${ruleList}" var="as" varStatus="vs">
<tr class="rule">
<td><input type="hidden" name="ruleList[${vs.index}].id" value="${as.rule.id}" /> ${as.rule.id}</td>
<td><input type="hidden" name="ruleList[${vs.index}].ruleName" value="${as.rule.ruleName}" /> ${as.rule.ruleName}</td>
<td> <input id="one" class="datepicker" type="text" name="ruleList[${vs.index}].startDate" size="11" height="0.10"></td>
<td> <input id="two" class="datepicker" type="text" name="ruleList[${vs.index}].endDate" size="11" height="0.10"></td>
<td>
<table border="1">
<c:forEach items="${as.ruleParameter}" var="asss">
<tr>
<td><input type="hidden" name="ruleList[${vs.index}].ruleParameter[${assignments.index}].parameterName"value="${asss.parameterName}"> ${asss.parameterName}</td>
<td><input type="hidden" name="ruleList[${vs.index}].ruleParameter[${assignments.index}].parameterValue" value="${asss.parameterValue}" /> ${asss.parameterValue}</td>
<td><input type="text" name="Name" value=""size="2"height="0.01">
<select style="width: 80px;">
<option value="">--Select--</option>
<c:forEach items="${targetlist}" var="target">
<option value="${target.displayName}"/>
<c:out value="${target.displayName}" />
</c:forEach>
</select>
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<br>
<input type="submit" value="create">
</form:form>
<div>
<form action="/submitrule" method="post" model="command">
<table>
<tr>
<td colspan="6" align="right">
<select name="Id">
<option value="">--Select--</option>
<c:forEach items="${listRules}" var="rule">
<option>
<c:out value="${rule.id}" />
</option>
</c:forEach>
</select>
<input type="submit" value ="add"></td>
</tr></table></form>
</div>
Controller
#RequestMapping(value = "/submitrule", method = RequestMethod.POST)
public String addruleSerch(#ModelAttribute ("SpringWeb") Rule obj2, ModelMap model) {
model.addAttribute("Id", obj2.getId());
Rule rul = ruleApi.getRule(obj2.getId());
ArrayList<Rule> rl1 = new ArrayList<Rule>();
List<RuleParameter> ptr2 = rul.getRuleParameter();
Iterator it = ptr2.iterator();
while(it.hasNext()) {
RuleParameter r = (RuleParameter) it.next();
System.out.println(r.getParameterName());
System.out.println(r.getParameterValue());
}
rl1.add(rul);
model.addAttribute("ruleList", rl1);
return "hello";
}
How to add multiple column?
Thank you in advance for help/suggestions.