title: Add new row to the table containing a drop down list on button click
body: <p>I want to add a new row on button click to a table. New Row will have one textbox and one drop-down.  Dropdown (select element)'s options to be added from session attribute. </p>
  
  <p>I am able to add textbox using following function. </p>
  
  <pre><code>    function addRow(btn) {         
          var parentRow = btn.parentNode.parentNode;
          var table = parentRow.parentNode;
          var rowCount = table.rows.length;
  
          var row = table.insertRow(rowCount);
  
          var cell1 = row.insertCell(0);
          var element1 = document.createElement("input");
          element1.type = "text";
          element1.name="abc";
          cell1.appendChild(element1);
          var cell3 = row.insertCell(1);
          var element2 = document.createElement("select");
          var option1 = document.createElement("option");
          option1.innerHTML = "Option1";
          option1.value = "1";
          element2.appendChild(option1, null);
      }
  </code></pre>
  
  <p>I have one session attribute <strong>"types"</strong>. I want to add one drop down list as other column to the row where options are to be added from <strong>types</strong>. I am setting the attribute "types" when page gets loaded.
  I am using Java Servlet for server side. 
   Any help is appreciated. </p>
  
  <pre><code>&lt;c:forEach items="${types}" var="type"&gt;
  </code></pre>