Менять строки таблицы jquery

$("table").on('click', ".add", function(){ 
     var $row = $(this).closest("tr"); 
     $row.clone().insertAfter($row) 
         .find("td").eq(1).text("строка " + $("tr").length); 
  }) 
  .on("click", ".remove", function(){ 
     $(this).closest("tr").remove(); 
  }) 
  .on("click", ".up, .down", function(){ 
     var $row = $(this).closest("tr"); 
      
     var up = $(this).hasClass("up") 
      
     var $t = up  ?  $row.prev() : $row.next() ; 
     if($t.length){ 
        up ? $t.insertAfter($row) : $t.insertBefore($row); 
     } 
  });

table { 
  counter-reset: row-num; 
} 
table tr { 
  counter-increment: row-num; 
} 
table tr td:first-child::before { 
    content: counter(row-num) ". "; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<table class="table table-hover table-striped table-condensed"> 
  <tbody> 
     <tr> 
       <td></td> 
       <td>строка 1</td> 
       <td><button class="btn btn-danger btn-xs remove">Удалить</button></td> 
       <td><button class="btn btn-primary btn-xs add" >Добавить</button></td> 
       <td> 
          <div class="btn-group btn-group-xs"> 
            <button class="btn btn-default up" >Вверх</button> 
            <button class="btn btn-default down" >Вниз</button> 
          </div> 
       </td>          
     </tr> 
  </tbody> 
</table>