title: Add dynamically an input js in a cell of table
body: <p>I'm trying to code a function where you can insert as many new input fields as the user want in JavaScript. Here is my code : </p>
  
  <pre><code>&lt;SCRIPT language="javascript"&gt; 
       function add() {       
          var element = document.createElement("input");      
          element.setAttribute("type", 'text');     
          element.setAttribute("value", 'text');     
          element.setAttribute("name", 'text');        
          var foo = document.getElementById("fooBar");      
          foo.appendChild(element);   
      } 
  &lt;/SCRIPT&gt;  
  </code></pre>
  
  <p>Html Part</p>
  
  <pre><code>&lt;form&gt;
    &lt;input type="text" name="answer" autofocus="autofocus" ONBLUR="if(this.value!=''){this.form.submit()};" placeholder="Modify answer"/&gt;
    &lt;span id="fooBar"&gt;&amp;nbsp;&lt;/span&gt;   
    &lt;input type="button" value="Add" onclick="add()"/&gt;   
  &lt;/form&gt;
  </code></pre>
  
  <p>This is working well, but not if I put it in this html structure : </p>
  
  <pre><code> &lt;table&gt;
       &lt;tr&gt;&lt;td&gt;&lt;form&gt; &lt;!--my html part -include the second form--&gt; &lt;/form&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>I don't really know why, as I'm not expert in js.. Is that because I'm in a <code>td</code> tag or because one <code>form</code> is inside the other.</p>
  
  <p>If anyone can help or have another solution to achieve what I want, would be really greatful
  Cheers</p>