title: Automatically adding table row via jQuery
body: <p>I am trying to add a table row dynamically via jQuery. Everything works fine but the row just won't add itself to the last &lt; tr>. Instead, it adds itself above the &lt; table>...</p>
  
  <p>I am quite confused. Could anyone help me out? Here is the code</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var counterx = 2;
  var counter = 2;
  
  $(document).ready(function(){
      $("#addMoreRcpt").click(function(){
          if (counterx&gt;10){
              alert("Only 10 reciepients are allowed");
              return false;
          }
  
          var newTextBoxDiv = $(document.createElement('div')).attr("id", 'RcptEml_' + counter);
          newTextBoxDiv.append("&lt;tr&gt;&lt;td&gt;New Data&lt;/td&gt;&lt;td&gt;New Data&lt;/td&gt;&lt;td&gt;New Data&lt;/td&gt;&lt;/tr&gt;");
  
          newTextBoxDiv.appendTo("#RcptGroup");
          counter++;
          counterx++;
      });
  });
  
  function fncDelRcpt(id){
      $("#RcptEml_"+id).remove();
      counterx--;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table border=1&gt;
  &lt;div id="RcptGroup"&gt;
  &lt;tr&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
  &lt;/tr&gt;
  &lt;div id="1"&gt;
  &lt;tr&gt;
      &lt;td&gt;data&lt;/td&gt;
      &lt;td&gt;Data&lt;/td&gt;
      &lt;td&gt;data&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/table&gt;
  &lt;br /&gt;&lt;a id="addMoreRcpt" href="#" &gt;Add more reciepients&lt;/a&gt;
  </code></pre>