JavaScript无法在JSP中正确生成HTML

我使用javascript在jsp页面中动态生成一些选择。代码运行良好。但我有一个问题，不知道如何处理。这是javascript代码：

 $('#addRow').click(function(){

        i++;

        //stuff categories
        var categoriesStr = '${stuffCategoriesListStr}';
        categoriesStr = categoriesStr.replace('[', '');
        categoriesStr = categoriesStr.replace(']', '');
        var categoriesList = categoriesStr.split(', ');

        var selectCategoriesHtml = "<select id='category"+i+"' style='width: 200px;' onchange=\"retrieveUrlAjax('ajaxstuff.action?category='+this.value, 'menusCombobox"+i+"')\"><option value='-1'>-- Select category --</option>";

        for (j = 0; j < categoriesList.length; j++) {

            var option = "<option value='"+categoriesList[j]+"'>"+categoriesList[j]+"</option>";
            selectCategoriesHtml += option;
        }

        selectCategoriesHtml += "</select>";
        //end os stuff categories

        //units list
        var unitsStr = '${unitsListStr}';
        unitsStr = unitsStr.replace('[','');
        unitsStr = unitsStr.replace(']','');
        var unitsList = unitsStr.split(', ');            

        var selectUnitsHtml = "<select id='unit+"+i+"' style='width: 200px;'><option value='-1'>-- Select unit --</option>";

        for (j = 0; j < unitsList.length; j++) {

            var option = "<option value='"+unitsList[j]+"'>"+unitsList[j]+"</option>";
            selectUnitsHtml += option;
        }

        selectUnitsHtml += "</select>";
        //end of units list

        var d = document.getElementById("fields");
        d.innerHTML += "<table width='100px'>\n\
                            <tr>\n\
                                <td>"+selectCategoriesHtml+"</td>\n\
                                <td width='100px;'><div class='menusCombobox"+i+"'><select style='width: 200px;'/></div></td>\n\
                                <td width='1%'><input type='text' style='width: 40px;' id='"+i+"' value='1'/></td>\n\
                                <td width='200px'>"+selectUnitsHtml+"</td>\n\
                            </tr>\n\
                        </table>";
    });        

这里是div：

 <div id="fields"></div>

结果是：

1屏幕：

2屏幕：

问题是，当我在第一行中选择某个内容，然后添加另一行时，所选第一行中的所有数据都会重置。您可以在第一个和第二个屏幕中看到这一点。我认为问题在于innerHTML，但我还没有找到其他替代方案。也许你们可以帮我。

我认为是innerHTML导致了这个问题，看看这个问题-

当您使用jQuery时，是否可以使用类似或的内容