How to add data from html table to textbox or textarea

Dear, I have a question, I would like to know how I can add data captured from an html table with javascript or jsp. My idea is that every time I select a row of a table with a checkbox, I add the value of that data in a textbox or textarea, and select several, all are added to the textbox or textarea but separated by commas since those would be my parameters to execute an sql query.

This would be the table from which I capture the data

<div class="content container-fluid col-lg-10">
    <div class="left panel-default">
        <div class="title panel-heading">Seleccionar guías a mover</div>
        <div class="panel-body panel panel-primary">  
<table class="table table-hover table table-responsive col-sm-6" id="tabla1">
                   <tbody>
                   <tr id="a1">

                       <th class="bg bg-primary">Awb</th>
                       <th class="bg bg-primary">Origen</th>
                       <th class="bg bg-primary">Destino</th>
                       <th class="bg bg-primary">Piezas</th>
                       <th class="bg bg-primary">Kilos</th>
                       <th class="bg bg-primary">Volumen</th>
                       <th class="bg bg-primary">Id Vuelo</th>
                       <th class="bg bg-primary">Tramo</th>
                       <th class="bg bg-primary">Mover</th>

                   </tr>
<%

try


{
    for(int i=0; i<guia.size(); i++)
           {


                        out.println("<tr id='a2'>");
                        out.println("<td class='cantidad'><input type='text' name='txt_guia' class='cantidad' value='"+guia.get(i).getNumeroGuia()+"'></td>");

                        out.println("<td class='check'>"+guia.get(i).getOrigenGuia()+"</td>");
                        out.println("<td class='check'>"+guia.get(i).getDestinoGuia()+"</td>");
                        //out.println("<td>"+guia.get(i).getOrigenVueloReserva()+"</td>");

                        out.println("<td class='check'>"+guia.get(i).getPiezasGuia()+"</td>");
                        out.println("<td class='check'>"+guia.get(i).getKilosGuia()+"</td>");
                        out.println("<td class='check'>"+guia.get(i).getVolumenGuia()+"</td>");
                        out.println("<td class='check'>"+guia.get(i).getIdVueloGuia()+"</td>");
                        out.println("<td class='check'>"+guia.get(i).getIdTramoGuia()+"</td>");

                        out.println("<td><input type='checkbox' name='check_guia' class='form-control checkbox' value='"+guia.get(i).getNumeroGuia()+"'></td>");



           }     

}
catch(java.lang.NullPointerException ex)
{
    out.println("<p>'"+ex.getMessage()+"'</p>");
    out.println("</tr>");
}


%>
</tbody>
                </table>

        </div>
    </div>      
    </div>

here the table that receives the selected columns and below the table is the textbox that should show the data

<div class="content container-fluid col-lg-10">
    <div class="right panel-default">
        <div class="title panel-heading">Guías Asignadas</div>
        <div class="panel-body panel panel-primary">    
<table class="table table-hover table table-responsive col-sm-6" id="tabla2">
                   <tbody>
                   <tr>

                       <th class="bg bg-primary">Awb</th>
                       <th class="bg bg-primary">Origen</th>
                       <th class="bg bg-primary">Destino</th>
                       <th class="bg bg-primary">Piezas</th>
                       <th class="bg bg-primary">Kilos</th>
                       <th class="bg bg-primary">Volumen</th>
                       <th class="bg bg-primary">Id Vuelo</th>
                       <th class="bg bg-primary">Tramo</th>
                       <th class="bg bg-primary">Acción</th>
                   </tr>

                </tbody>  
               </table>
            <input type="text" id="txt_mostrar" class="form-control">
<br><br><br><br>

        </div>
    </div>
    </div>

here is the javascript code that is responsible for capturing the selected data from the column named "awb" in the table.

<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function() {
    if($(this).is(":checked"))
    {
        // el checkbox esta marcado
        // movemos la columna a la tabla2
        var tr=$(this).parents("tr").appendTo("#tabla2 tbody");
                    console.log($(this).parents('tr').find('td.cantidad').html());

                    var dato = $(this).parents('tr').find('input:text[name="txt_guia"]').val();
                    $('#txt_mostrar').val(dato);

    }else{
        // el checkbox esta desmarcado
        // movemos la columna a la tabla1
        var tr=$(this).parents("tr").appendTo("#tabla1 tbody");
    }


});
});

</script>

The problem is that when I select the data I capture it, but if I select another one, then I replace the previous one in the text field and what I need is for each captured value to be displayed side by side separated by a comma.

here the image.