title: Using jQuery UI sortable with HTML tables
body: <p>I want to output some data from the database in a HTML table, and I want the user to be able to reorder table rows. To achieve this, I used jQuery UI sortable, thus:</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          $( "#sortable" ).sortable();
          $( "#sortable" ).disableSelection();
      });
      &lt;/script&gt;
  &lt;?php 
   while($row = mysql_fetch_assoc($co_authors)) {
                      echo "&lt;tr id='sortable'&gt;&lt;td&gt;{$row['author_email']}&lt;/td&gt;
                           &lt;td&gt;{$row['coauthor_level']}&lt;/td&gt;";
                           &lt;td&gt;&lt;button class='remove' id='remove' name='remove' email="&lt;?php echo $row['author_email'] ?&gt;"
                              paper="&lt;?php echo $row['paper_id'] ?&gt;"&gt;Remove&lt;/button&gt;&lt;/td&gt;
                           &lt;/tr&gt;";
                  }
  ?&gt;
  </code></pre>
  
  <p>The problem is that when I drag a table <code>tr</code>, only <code>td</code> are dragged. Also, and most importantly, only the first row is dragable: the effect is not applied to other rows. How can I solve this?</p>