How to create a drag and drop sortable table with add/remove a row function by using jQuery?

This is an example to create a table which could be sorted by drag and drop, also the row can be added and removed. You can see the table example here.

In this example, Sortable table part, I used jQuery sortable widget.
The html code as below.

 <table id="classtable" class="table table-striped">  
                <thead>  
                     <tr>  
                          <th>Class Internal Name</th>  
                          <th>Display Name</th>  
                          <th>Enabled</th>  
                          <th>Search Weight</th>  
                          <th>Delete class</th>  
                     </tr>  
                </thead>  
                <tbody id="sortable">  
                     <tr>  
                          <td><input type="text" id="internalname" name="internalname" placeholder="Class Internal Name" value='Agreement Supplier'></td>  
                          <td><input type="text" id="displayname" name="displayname" placeholder="Display Name" value='Agreement Supplier'></td>  
                          <td><input type="checkbox" name="enabled" value='1'></td>  
                          <td><input type="text" id="weight1" name="weight1" value='1'></td>                 
                          <td><button type="button" class="removebutton" title="Remove this class"><span class="glyphicon glyphicon-remove "></span></button> </td>  
                     </tr>  
                     <tr>  
                          <td><input type="text" id="internalname" name="internalname" placeholder="Class Internal Name" value='California Supplier'></td>  
                          <td><input type="text" id="displayname" name="displayname" placeholder="Display Name" value='California Supplier'></td>  
                          <td><input type="checkbox" name="enabled" value='1'></td>  
                          <td><input type="text" id="weight1" name="weight1" value='1'></td>  
                          <td><button type="button" class="removebutton" title="Remove this class"><span class="glyphicon glyphicon-remove "></span></button> </td>  
                     </tr>  
                     <tr>  
                          <td><input type="text" id="internalname" name="internalname" placeholder="Class Internal Name" value='Small Business'></td>  
                          <td><input type="text" id="displayname" name="displayname" placeholder="Display Name" value='Small Business'></td>  
                          <td><input type="checkbox" name="enabled" value='1'></td>  
                          <td><input type="text" id="weight1" name="weight1" value='1'></td>  
                          <td><button type="button" class="removebutton" title="Remove this class"><span class="glyphicon glyphicon-remove "></span></span></button> </td>  
                     </tr>                      
                </tbody>  
 </table>  

The javascript code is as below.

 $("#sortable").sortable();  

Add a new row javascript:

 $("#addbutton").click(function () {  
             $("#classtable").each(function () {  
                         var i=0;  
                var tds = '<tr class="ui-sortable-handle" >';  
                tds += '<td><input type="text" id="internalname" name="internalname" placeholder="Class Internal Name"></td>'+  
                          '<td><input type="text" id="displayname" name="displayname" placeholder="Display Name"></td>'+  
                          '<td><input type="checkbox" name="enabled"></td>'+  
                          '<td><input type="text" id="weight1" name="weight1"></td>'+  
                          '<td><button type="button" class="removebutton" title="Remove this class"><span class="glyphicon glyphicon-remove "></span></button> </td>';  
               tds += '</tr>';  
                if ($('tbody', this).length > 0) {  
                  $('tbody', this).append(tds);  
                } else {  
                  $(this).append(tds);  
                }  
              });  
           });  

Remove a row javascript:

 $("#classtable").on("click",".removebutton",function () {  
              if (confirm("Do you want to delete?")){  
                   $(this).closest('tr').remove();  
               }  
              return false;  
            });