title: How to change innerHTML of the last cell of a selected row?
body: <p>I have two tables. When the user clicks on the "add" button, that row will be added to the other table. And in the other table, when the user clicks on the "delete" button, that row will be added to the previous table. I have this part working fine.</p>
  
  <p>The problem is that I need to change the button of the rows when they change tables. When a row goes from the "add" table to the "delete" table, the button needs to pass from "add" to "delete". </p>
  
  <p>Here's an image so you can understand better:</p>
  
  <p><a href="https://i.stack.imgur.com/YQsHv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQsHv.png" alt="enter image description here"></a> </p>
  
  <p>The code I have is this one:</p>
  
  <pre><code>$(document).ready(function(){
  
      $(".agregar").on("click", function(event){
          event.preventDefault();
  
          var row = $(this).parents('tr');
  
          //$(this).parents('tr').find('td:last-child').val();
  
          $('#tablaSala').append(row);
      });
  
     $(".borrar").on("click", function(event){
          event.preventDefault();
  
          var row = $(this).parents('tr');
  
          $('#tablaDisponibles').append(row);
      });
  });
  </code></pre>
  
  <p>I need to edit that last cell before I put the row on the other table.</p>
  
  <p>This would be the code of the buttons</p>
  
  <pre><code>//add button
  &lt;button class="btn agregar"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;
  
  //delete button
  &lt;button class="btn borrar"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>