title: duplicate drop-downs on button click
body: <p>Currently I have this setting.
  My page loads with 2 drop-downs aligned adjacent and an ADD button.
  The ADD button adds a drop-down in the next row using the function addRow().
  The function is probably the worst implementation though.</p>
  
  <p>a) I want ADD button to add 2 similar drop-downs aligned adjacent as in the page initially, to the next row. (right now the code only adds 1 drop-down in the next row)</p>
  
  <p>b) is there any way I can put my ADD button to be below the drop-downs I have instead of being next to the first row of drop-downs?</p>
  
  <p>Below is the code</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;table&gt;
                  &lt;tr&gt;
  
  
  
  &lt;td&gt;
  &lt;select id="soflow"&gt;
    &lt;!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. --&gt;
    &lt;option&gt;Select an Option&lt;/option&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option&gt;Option 2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="soflow"&gt;
      &lt;!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. --&gt;
      &lt;option&gt;Select an Option&lt;/option&gt;
      &lt;option&gt;Option 1&lt;/option&gt;
      &lt;option&gt;Option 2&lt;/option&gt;
    &lt;/select&gt;
  
   &lt;button class = "button" type="button" onClick ="addRow(this)"&gt;Add&lt;/button&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
      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 element2 = document.createElement("input");
          var element2 = document.createElement("select");
          element2.setAttribute("id", "soflow")
          //element2.type = "select";
          var option1 = document.createElement("option");
          option1.innerHTML = "Option1";
          option1.value = "1";
          element2.add(option1, null);
          var option2 = document.createElement("option");
          option2.innerHTML = "Option2";
          option2.value = "2";
          element2.add(option2, null);
          cell1.appendChild(element2);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you for any help.</p>