pass table row to another with jquery

Hi, I'm making a table that shows the contents of my database.

I am using this code: Jquery 1.4.2

    $(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row)
           .appendTo(targetTable)
           .find("a")
               .text(newLinkText);
   }

   $("#idfirst a").live("click", function(){
       moveRow($(this).parents("tr"), $("#idsecond"), " Agregar");
   });

   $("#idsecond a").live("click", function(){
       moveRow($(this).parents("tr"), $("#idfirst"), " Eliminar");

   });
});

And my table:

    <div id="table-wrapper">
        <div id="table-scroll">
            <table id="idsecond" class="table table-bordered table-hover">
                  <thead>
                    <tr>

                        <th>Articulo</th>
                        <th>Unidad M.</th>
                        <th>Valor</th>
                        <th>Categoria</th>
                        <th>P.Unitario</th>
                        <th>Imagen</th>
                        <th>Accion</th>

                    </tr>
                  </thead>
                  <tbody>
                        <?php 
                            if ($result2->num_rows > 0) {

                                while($row = $result2->fetch_assoc()) {

                            echo '<tr><td>'.$row["nombre"].
                            '</td><td>'.$row["unidad_medida"].
                            '</td><td>'.$row["peso"].
                            '</td><td>'.$row["categoria"].
                            '</td><td>S/ '.$row["precio"].
                            '</td><td><img height="100" width="100" src="php/'.$row["imagen"].'" alt="img01" />
                            </td><td>
                            <button type="button" id="idbtnagregar" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-plus" ></i>
                            <a href="#" style="text-decoration:none;color:white;">&nbsp;Agregar</a>
                            </button>
                            </td></tr>';

                                }
                            } else {
                                echo "0 results";
                            }

                            $conn->close();
                        ?>
                  </tbody>
              </table>
        </div>
    </div>

What the jquery code does is to pass data from one table ( idsecond ) to another table ( idfirst ):

<table id="idfirst" class="table table-bordered table-hover">
// Se agregan de otra tabla
//ademas que se genera el botón de eliminar, para cada fila
</table>

The problem is that I want the delete button to change its background-color when it is to delete, and I also add a column with an input text for each row.

I would also like to know how you could do that by entering a value in each text field, calculate a total (multiplying what is entered in the text field and the unit price P.Unitary of each row) and It shows in another row. To later enter it in my database.

Any ideas on how to do it? Thanks in advance.