Need to generate columns dynamically
<p>I need to dynamically create tables one beside the other. So I have created a table(outer) and am trying to generate columns dynamically on button click. In each of these columns I will create the actual tables(inner) I need, so that in the end they appear side by side.</p>

<p>But I'm stuck at creating columns for the bigger table. Take a look at the code and it will be clear. 
Any solution in JS is appreciated. Thanks in advance</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script type="text/javascript"&gt;    
            function add() {
                var table = document.getElementById('foo');
                var rowCount = table.rows.length;             
                var row =document.getElementById('rowl');         
                var max=table.rows[0].cells.length;
                var cnum;

                if(max==0){
                    cnum=0;
                }else{
                    cnum=max+1;
                }

                var cell1 = row.insertCell(cnum);             

                cell1.innerHTML = "&lt;table id='tabl'"+
                    cnum+
                    "' border=2 bordercolor='RED'&gt;&lt;tr&gt;&lt;th&gt;Material  "+
                    (cnum+1)+
                    "&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;bdfgher&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;fdgerh&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"; 
                }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;button type="button" onclick="add()"&gt;Add cell&lt;/button&gt;
        &lt;table id="foo" border=1 bordercolor="BLUE"&gt;
            &lt;tr id="rowl"&gt;&lt;/tr&gt;
        &lt;/table&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
