While adding row dynamically using javascript I am incrementing the index value, but getting error

Question

<script type="text/javascript"
    src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
    var rowCount = 1;
    function addMoreRows() {

        rowCount++;
        alert("Hello "+rowCount);
        var recRow = '<p id="rowCount'+rowCount+'">'
                + '<tr><td><form:input path="dynamicRow['+rowCount+'].id"/></td>'
                + '<td><form:input path="dynamicRow['+rowCount+'].name" /></td>'
                + '<td><form:input path="dynamicRow['+rowCount+'].email" /></td></tr>'
                + ' <a href="javascript:void(0);" onclick="removeRow('
                + rowCount + ');">Delete</a>' + '</p>';

        $('#addedRows').append(recRow);

        //$(document).trigger("addedNewRow", rowCount);
    }

    function removeRow(removeNum) {
        $('#rowCount' + removeNum).remove();
        rowCount--;
    }
</script>

This is the script I am using in my jsp page, but while running its throwing an error

Invalid property 'dynamicRow[+rowCount]' of bean class [com.sharique.beans.DynamicRowForm]: Invalid index in property path 'dynamicRow[+rowCount]'; nested exception is java.lang.NumberFormatException: For input string: "+rowCount"

Previously it was working, but during code clean up, I did some change and after that it started throwing this exception. I don't know what is the mistake here.Please help!!

Answer 1

Remove the single quotes and '+' inside dynamicRow['+rowCount+'] and check. Make it dynamicRow[rowCount]