JavaScriptが正しく生成されないJSPでのHTML

javascriptを使用してjspページでいくつかの選択を動的に生成しています。コードは正常に動作します。しかし、私は問題があり、それに対処する方法を知らない。まあ、これはjavascriptのコードです：JavaScriptが正しく生成されないJSPでのHTML

$('#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要素である：