javascript - How to add text from a table to a textarea input with button? -

how can text table show in textarea box when press "add" button?

i don't need data go away after has been added, want "add text textarea" show in textarea box.

https://jsfiddle.net/bj1sh4cq/

html

<div class="table-responsive">     <table class="table table-hover">         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>         <tr>             <td><button class="btn btn-success" id="addbutton">add</a>              </td>             <td><span id="addtext"><strong>add text textarea.</span>                  </strong>             </td>         </tr>     </table> </div> </div> </div> <br> <div class="form-group">     <textarea type="text" id="reviewtext" placeholder="see text here." class="form-control" columns="10" rows="10"></textarea> </div> </div> </div> 

js

 $('#addbutton').on('click', function (){                        var inserttext = $('#addtext').val();          $('#reviewtext').val($('#reviewtext').val() + " "+inserttext); }); 

first cannot define multiple ids on page. second should change:

var inserttext = $('#addtext').val();  

to:

$('#reviewtext').val($(this).closest('td').next().text()); 

here updated fiddle