title: Creating nested tables
body: <p>Good day. I'm trying to create nested tables one hundred times. However, my code creates one main table and then inside that, there are 100 separate tables. (Thanks to Sir Sachin for the help) What I need is table within a table. Please help me fix the code. <br><br></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt; &lt;title&gt; Hello! &lt;/title&gt; 
  
  &lt;script type="text/javascript"&gt;
  function add() { 
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById('theValue').value -1)+ 2;
      numi.value = num;
      var newdiv = document.createElement('div');
      var divIdName = 'my'+num+'Div';
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = "&lt;table border=1&gt;&lt;tr&gt;&lt;td&gt; Hello! &lt;input type='hidden' value=1 id='theValue' /&gt;&lt;div id='" + divIdName + "'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
      ni.appendChild(newdiv);
      for(var i=1;i&lt;100;i++) {
          var ni = document.getElementById(divIdName);
          var numi = document.getElementById('theValue');
          var num = (document.getElementById('theValue').value -1)+ 2;
          numi.value = num;
          var newdiv = document.createElement('div');
          var divIdName = 'my'+num+'Div';
          newdiv.setAttribute('id',divIdName);
          var j=i++;
          newdiv.innerHTML = "&lt;table border=1&gt;&lt;tr&gt;&lt;td&gt; Hello! &lt;input type='hidden' value='" + j + "' id='theValue' /&gt;&lt;div id='" + divIdName + "'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
          ni.appendChild(newdiv);
      }
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="add()"&gt;
  &lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt; Hello! &lt;input type='hidden' value='0' id='theValue' /&gt;
  
          &lt;div id='myDiv'&gt; &lt;/div&gt; &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>