title: Adding new Table Data <td> after the 3rd element of <tr>
body: <p>I've encountered some problems while building something, I want my application to become modular so the modules are all independent and I can simply activate and deactivate them. I have this table</p>
  
  <pre><code>&lt;tbody&gt;
  
      &lt;tr data-id=""&gt;
          &lt;td&gt;&lt;input name="id[]" value="" type="checkbox" class="form-control"&gt;&lt;/td&gt;
          &lt;td&gt;
  
              &lt;a title="Edit" href="/post/update/"&gt;
              &lt;i class="icon-edit"&gt;&lt;/i&gt;&lt;/a&gt; &amp;nbsp; 
              &lt;a title="Remove" href="/post/remove/" class="text-danger remove"&gt;&lt;i class="icon-remove" value=""&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/td&gt;
          &lt;td&gt;53b1098726ea03181ef607a4&lt;/td&gt;
          &lt;td&gt;Test post&lt;/td&gt;
          &lt;td&gt;draft&lt;/td&gt;
          &lt;td valign="middle"&gt;June 30, 2014 02:59 PM&lt;/td&gt;
      &lt;/tr&gt;   
  
      &lt;tr data-id=""&gt;
          &lt;td&gt;&lt;input name="id[]" value="" type="checkbox" class="form-control"&gt;&lt;/td&gt;
          &lt;td&gt;
  
              &lt;a title="Edit" href="/post/update/"&gt;
              &lt;i class="icon-edit"&gt;&lt;/i&gt;&lt;/a&gt; &amp;nbsp; 
              &lt;a title="Remove" href="/post/remove/" class="text-danger remove"&gt;&lt;i class="icon-remove" value=""&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/td&gt;
          &lt;td&gt;53b255006f9f65c426433158&lt;/td&gt;
          &lt;td&gt;test&lt;/td&gt;
          &lt;td&gt;draft&lt;/td&gt;
          &lt;td valign="middle"&gt;July 01, 2014 02:16 PM&lt;/td&gt;
      &lt;/tr&gt;   
  
      &lt;tr data-id=""&gt;
          &lt;td&gt;&lt;input name="id[]" value="" type="checkbox" class="form-control"&gt;&lt;/td&gt;
          &lt;td&gt;
  
              &lt;a title="Edit" href="/post/update/"&gt;
              &lt;i class="icon-edit"&gt;&lt;/i&gt;&lt;/a&gt; &amp;nbsp; 
              &lt;a title="Remove" href="/post/remove/" class="text-danger remove"&gt;&lt;i class="icon-remove" value=""&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/td&gt;
          &lt;td&gt;53b3a3fbac4e617822fa82ed&lt;/td&gt;
          &lt;td&gt;this is an example post with category&lt;/td&gt;
          &lt;td&gt;draft&lt;/td&gt;
          &lt;td valign="middle"&gt;July 02, 2014 02:31 PM&lt;/td&gt;
      &lt;/tr&gt;   
  
  &lt;/tbody&gt;
  </code></pre>
  
  <p>and then I have this jQuery:</p>
  
  <pre><code>var post_table_body = $('body .post-list .table tbody tr');
  
  // append the table-content
  $.each(post_table_body, function(key, item) {
      console.log(item.children);
      item.children().after('&lt;td&gt;Sample Category&lt;/td&gt;');
      //item.children().eq(3).after('&lt;td&gt;Sample&lt;/tb&gt;');
  });
  </code></pre>
  
  <p>so basically what I wanted to do is add an additional <code>&lt;td&gt;</code> after the 3rd <code>&lt;td&gt;</code>
  but I'm having this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: object is not a function </p>
  </blockquote>
  
  <p>whenever I try to run it on my browser, can someone help me out please? </p>