I have a HTML form which contains a button. When the button is pressed a function is called which queries the database and displays a list box(list box populated with values from the database). This way user can add any number of list boxes.

Here is my code

client.jsp
/*************************/
<%@page contentType="text/html"%>
<html>
<head>
<script type="text/javascript" src="scripts.jsp"></script>
</head>
<body>
<form action="submitAddClient.jsp">
<div id="container"></div>
<input type="button" onclick="insSelect();" value="Add Dept" />
<input type="submit">

</form>
</body>
</html>
/*********************/
Here is scripts.jsp
/********************/

var myDataArray = new Array(
<%
con = ConnectionManager.getConnection();
stmt=con.createStatement();
rs=stmt.executeQuery("SELECT dept_name FROM department ");

while( rs.next() )
{
data = rs.getString(1);
out.println("\"" + data + "\",");
}
out.println("\"\"");
con.close();
%>
);

function insSelect()
{
var containerElement= document.getElementById("container");
var newSelectElement = document.createElement("select");
newSelectElement.name="dept_name"; //Problem Line
for (i=0; i < (myDataArray.length - 1); i++)
{

var newOptionElement = document.createElement("option");
newOptionElement.setAttribute("value", myDataArray[i]);
newOptionElement.innerHTML = myDataArray[i];

newSelectElement.appendChild(newOptionElement);
}

containerElement.appendChild(newSelectElement);
}



/*************************/

This all works fine.
But there is one problem.
Each select box is created with the name "dept_name" (when the button is pressed more than once and hence there are more than one list boxes). So when i submit the form I get value of only one list box(even when there are multiple list boxes).