Dynamically add rows for spring form using Jquery
Could someone please help me with the following?
I use spring for my project and i have a jsp page that has a table in which the first row is loaded from a controller. The table has also an "Add row" button with which the user can add multiple rows to add more records before the submission of the form.
What happens is that I use AutopopulatingList so in the submission each row to be handled as a seperate object in the controller.
My problem is with the add button. I use JQuery to add dynamically rows. But clone option is not suitable (i think correct me if i am wrong) cause I can not handle the index of the list. I used the following but nothing works. 

    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
    <%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

    <%@page contentType="text/html" pageEncoding="UTF-8"%>
     <!DOCTYPE html>
    <html>
    <head>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Addcolsinviews Add</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="../js/jquery.validate.min.js"></script>
   
        <script type="text/javascript">
           $(document).ready(function() {
                         
	$("#addStudentButton").click(function() {
		
              $('#dataTable tbody>tr:last').clone(true).insertAfter('#dataTable tbody>tr:last');     
              return false;
 
	});
    });
    </script>

        </head>
    <body>
        <%@include file="header.jsp" %>
        </div>
        <div class="main">
            <%@include file="tableslist.jsp" %>
            <div class="content">
                <div class="subtitle">ADDCOLSINVIEWS ADD</div>   
                
      <form:form method="POST" name="addcolsForm" id="addcolsForm" commandName="addcolsinviewsadd">
            <table id="dataTable"> 
                <thead>
                        <tr margin-top="10px">
                            <th>Target View</th>
                            <th>Target Column</th>
                            <th>Source View</th>
                            <th>Source Column</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  id="rowToClone">                           
                         <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetview">
                                    <form:input path="${status.expression}"/>                              
                                </spring:bind></td>            
                            <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetcol">
                                    <form:input path="${status.expression}"/>
                                </spring:bind></td>    
                            <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourceview">
                                    <form:input path="${status.expression}"/>
                                </spring:bind></td>
                            <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourcecol">
                                    <form:input path="${status.expression}"/>
                                </spring:bind></td>  
                            <td><input type="button" id="addStudentButton" value="Add"/></td>
                          
                        </tr>                        
                 </tbody>
              </table>                 
               <input id="actionbtn" type="submit" value="Process">            
     </form:form>   
                 </div>
          </div>                   
    </body>
    </html>


and the second trial was the part of the jquery as follows:

    
        <SCRIPT language="javascript">      
            
        $(document).ready(function() {
                         
	var incrementVar = 0;
	$("#addStudentButton").click(function() {
		incrementVar++;
                var appendTxt = "<tr>";
    		appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetview\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td>";                 
                    
                appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetcol\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td>";  
             
                appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourceview\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td>";
             
               appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourcecol\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td></tr>";
       alert(appendTxt);   
      
	$("#dataTable tr:last").after(appendTxt);
        
    </script>

The problem with the above is that no row added at all. The page seems to try to add a row but it is too small.. and i get no errors. In the alert of appendTxt the ${status.expression} does not exist. The path is null. I dont know if this is the problem.

I dont know what to do and I have already search a lot.. Please I would appreciate your help.
Dynamically add rows for spring form using Jquery
===

Could someone please help me with the following?
I use spring for my project and i have a jsp page that has a table in which the first row is loaded from a controller. The table has also an "Add row" button with which the user can add multiple rows to add more records before the submission of the form.
What happens is that I use AutopopulatingList so in the submission each row to be handled as a seperate object in the controller.
My problem is with the add button. I use JQuery to add dynamically rows. But clone option is not suitable (i think correct me if i am wrong) cause I can not handle the index of the list. I used the following but nothing works. 

    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
    <%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

    <%@page contentType="text/html" pageEncoding="UTF-8"%>
     <!DOCTYPE html>
    <html>
    <head>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Addcolsinviews Add</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="../js/jquery.validate.min.js"></script>
   
        <script type="text/javascript">
           $(document).ready(function() {
                         
	$("#addStudentButton").click(function() {
		
              $('#dataTable tbody>tr:last').clone(true).insertAfter('#dataTable tbody>tr:last');     
              return false;
 
	});
    });
    </script>

        </head>
    <body>
        <%@include file="header.jsp" %>
        </div>
        <div class="main">
            <%@include file="tableslist.jsp" %>
            <div class="content">
                <div class="subtitle">ADDCOLSINVIEWS ADD</div>   
                
      <form:form method="POST" name="addcolsForm" id="addcolsForm" commandName="addcolsinviewsadd">
            <table id="dataTable"> 
                <thead>
                        <tr margin-top="10px">
                            <th>Target View</th>
                            <th>Target Column</th>
                            <th>Source View</th>
                            <th>Source Column</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  id="rowToClone">                           
                         <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetview">
                                    <form:input path="${status.expression}"/>                              
                                </spring:bind></td>            
                            <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetcol">
                                    <form:input path="${status.expression}"/>
                                </spring:bind></td>    
                            <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourceview">
                                    <form:input path="${status.expression}"/>
                                </spring:bind></td>
                            <td>
                                <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourcecol">
                                    <form:input path="${status.expression}"/>
                                </spring:bind></td>  
                            <td><input type="button" id="addStudentButton" value="Add"/></td>
                          
                        </tr>                        
                 </tbody>
              </table>                 
               <input id="actionbtn" type="submit" value="Process">            
     </form:form>   
                 </div>
          </div>                   
    </body>
    </html>


and the second trial was the part of the jquery as follows:

    
        <SCRIPT language="javascript">      
            
        $(document).ready(function() {
                         
	var incrementVar = 0;
	$("#addStudentButton").click(function() {
		incrementVar++;
                var appendTxt = "<tr>";
    		appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetview\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td>";                 
                    
                appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetcol\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td>";  
             
                appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourceview\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td>";
             
               appendTxt = appendTxt +                     
                 "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourcecol\">";
                appendTxt = appendTxt + 
                 "<form\:input path=\"${status.expression}\"/>";
                appendTxt = appendTxt +
                 "</spring\:bind></td></tr>";
       alert(appendTxt);   
      
	$("#dataTable tr:last").after(appendTxt);
        
    </script>

The problem with the above is that no row added at all. The page seems to try to add a row but it is too small.. and i get no errors. In the alert of appendTxt the ${status.expression} does not exist. The path is null. I dont know if this is the problem.

I dont know what to do and I have already search a lot.. Please I would appreciate your help.