title: Move an existing cell from an existing row into a new row using JQuery
body: <p>I want to move a cell in a table to a new row. The table just contains one row with four cells. The third one is the one I need. The cell has to be removed from the existing row so only the new one contains it.</p>
  
  <p>This is my markup:</p>
  
  <pre><code>&lt;table class="sbtable"&gt;
  &lt;tbody&gt;
  &lt;tr class="sbrow"&gt;
  &lt;td class="first"&gt;Blah&lt;/td&gt;
  &lt;td class="second"&gt;Blah&lt;/td&gt;
  &lt;td class="third"&gt;Blah&lt;/td&gt;
  &lt;td class="last"&gt;Blah&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>function formatSearchBox() {
  $(".sbtable").each(function () {
      var table = $(this);
      var firstRow = $(table).find("tr:first");
      var cell = $(firstRow).find("td").eq(2);
      var newRow = "&lt;tr&gt;&lt;/tr&gt;";
      $(newRow).append($(cell));
      console.log(newRow);
      $(newRow).append("&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;");
      $(firstRow).after($(newRow));
  });
  }
  </code></pre>
  
  <p>My problem is that the script only inserts a blank <code>&lt;tr&gt;&lt;/tr&gt;</code> and I have absolutely no idea why. I need the html like this:</p>
  
  <pre><code>&lt;table class="sbtable"&gt;
  &lt;tbody&gt;
  &lt;tr class="sbrow"&gt;
  &lt;td class="first"&gt;Blah&lt;/td&gt;
  &lt;td class="second"&gt;Blah&lt;/td&gt;
  &lt;td class="last"&gt;Blah&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="third"&gt;Blah&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>