title: Javascript multiple dropdown in a table
body: <p>I am trying to insert three dropdowns on "onclick" event in a single row in a top to bottom sequence,but instead dropdowns are inserted sideways.Please help me as i am new to javascript.    </p>
  
  <p><strong>Code Snippet:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggle(id) {
    var supliers = new Array();
    var sid = document.getElementById(id).checked;
    var val = document.getElementById(id).value;
    supliers.push(val);
    if (sid) {
      var table = document.getElementById("mytable");
      document.body.appendChild(table);
      for (var i = 0; i &lt; supliers.length; i++) {
  
        var cell = table.insertCell(0);
        cell.setAttribute("id", "myTr");
        cell.innerHTML = "&lt;select  style='width:53px; margin-top: -5px'      name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'&gt; " +
          "&lt;option value='-1'&gt;Select&lt;/option&gt;" +
          "&lt;option value='7'&gt;YES&lt;/option&gt;" +
          "&lt;option value='8'&gt;NO&lt;/option&gt;" +
          "&lt;/select&gt;";
  
  
        var cell1 = table.insertCell(1);
  
        cell1.innerHTML = "&lt;select  style='width:53px; margin-top: -10px'   name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'&gt; " +
          "&lt;option value='-1'&gt;Select&lt;/option&gt;" +
          "&lt;option value='7'&gt;YES&lt;/option&gt;" +
          "&lt;option value='8'&gt;NO&lt;/option&gt;" +
          "&lt;/select&gt;";
  
        var cell2 = table.insertCell(2);
  
        cell2.innerHTML = "&lt;select  style='width:53px; margin-top: -12px'    name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'&gt; " +
          "&lt;option value='-1'&gt;Select&lt;/option&gt;" +
          "&lt;option value='7'&gt;YES&lt;/option&gt;" +
          "&lt;option value='8'&gt;NO&lt;/option&gt;" +
          "&lt;/select&gt;";
  
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" id="supplierA" onclick="toggle(id)"&gt;
  &lt;input type="checkbox" id="supplierB" onclick="toggle(id)"&gt;
  
  &lt;table style="border: 1px solid #000000; height: 250px;"&gt;
    &lt;tr id="mytable"&gt;&lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>