Получить данные из базы данных и динамически отображать их в строках таблицы с помощью текстовых полей

В настоящее время я работаю над проектом управления запасами. Я работаю с JSP и MySQL на платформе Netbeans. В моем проекте по запросу мне нужно получить значения из базы данных и отобразить их в таблице. Отображаемые строки должны быть динамическими на моей странице. Они должны отображаться в любом количестве. Предположим, когда я хочу получить значения на основе определенного выбора, который я выбираю, я должен иметь возможность отображать все данные на основе выбора и отображать их в строках таблицы. Я не могу отобразить его в нескольких строках моей таблицы, потому что я использую текстовые поля для отображения значений. Вот фрагмент кода:

<table>
    <tr>
        <td>
            <select name="choice_type">
            <option>select</option>
            <option value="part_type">part_type</option>
            <option value="category">category</option>
            <option value="names">names</option>
            </select>    
        </td>
    </tr> 
    <tr>
        <th>VAL</th>
        <th>VAL DESC</th>
    </tr>
    <tr>
        <td> <input type="text" name="val"  id="val" size="15" /></td>
        <td> <input type="text" name="val_desc"  id="val_desc" size="15" /></td>
    </tr>
</table>   

<input type="submit" name="Query" value="Query" onClick="getData();"/>

Функция getData() выглядит следующим образом:

function getData(){ 
    xmlHttp=GetXmlHttpObject()
    var id=document.getElementById("choice_type").value;
    var url="choice_retrieval.jsp";//The code for this file is defined below 
    url=url+"?choice_type="+id;
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null);
}

function stateChanged(){ 
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
    var showdata = xmlHttp.responseText; 
    var strar = showdata.split(":");
    if(strar.length>1){
    var strname = strar[1];
    document.getElementById("val").value= strar[1];
    document.getElementById("val_desc").value= strar[2];
   }
} 

Фрагмент кода для selection_retrieval.jsp выглядит следующим образом:

<%
    String ch = request.getParameter("choice_type").toString();
    System.out.println(ch);
    String data ="";
    try{
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://", "", "");
        Statement st=con.createStatement();
        ResultSet rs=st.executeQuery("select * from master_panel where choice_type='"+ch+"'");
        while(rs.next())
        {
            data = ":" + rs.getString("val") + ": " + rs.getString("val_desc");
        }
        out.println(data);
        System.out.println(data);
    }
    catch(Exception e) {
        System.out.println(e);
    }
%>

Здесь используется таблица базы данных master_panel(choice_type varchar,val varchar,val_desc varchar ). Я не ставил никаких ограничений на данный момент. На основе значения selection_type мне нужно получить соответствующие данные (val и val_desc) из базы данных и отобразить их в динамических строках.