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

Question

How can I get the text from the table to show up in the textarea box when I press the "add" button?

I don't need the data to go away after it has been added, I just want the "Add this text to textarea" to show up in the 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 this text to textarea.</span>

                </strong>
            </td>
        </tr>
        <tr>
            <td><button class="btn btn-success" id="addButton">ADD</a>

            </td>
            <td><span id="addText"><strong>Add this text to textarea.</span>

                </strong>
            </td>
        </tr>
        <tr>
            <td><button class="btn btn-success" id="addButton">ADD</a>

            </td>
            <td><span id="addText"><strong>Add this text to textarea.</span>

                </strong>
            </td>
        </tr>
        <tr>
            <td><button class="btn btn-success" id="addButton">ADD</a>

            </td>
            <td><span id="addText"><strong>Add this text to textarea.</span>

                </strong>
            </td>
        </tr>
        <tr>
            <td><button class="btn btn-success" id="addButton">ADD</a>

            </td>
            <td><span id="addText"><strong>Add this text to textarea.</span>

                </strong>
            </td>
        </tr>
        <tr>
            <td><button class="btn btn-success" id="addButton">ADD</a>

            </td>
            <td><span id="addText"><strong>Add this text to textarea.</span>

                </strong>
            </td>
        </tr>
        <tr>
            <td><button class="btn btn-success" id="addButton">ADD</a>

            </td>
            <td><span id="addText"><strong>Add this text to textarea.</span>

                </strong>
            </td>
        </tr>
        <tr>
            <td><button class="btn btn-success" id="addButton">ADD</a>

            </td>
            <td><span id="addText"><strong>Add this text to 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);
});

dup? http://stackoverflow.com/questions/6734579/how-to-append-text-to-textarea — wrschneider, Apr 01 '15 at 15:50
Actually there's [`appendTo()`](http://api.jquery.com/append/) in your fiddle. It doesn't copy elements, it "cuts". Vohuman has explained above, why only the first button works. — Teemu, Apr 01 '15 at 15:51

Timur Osadchiy · Accepted Answer · 2015-04-01T15:56:53.527

1

First you cannot define multiple ids on the page. Second you should change:

var insertText = $('#addText').val();

to:

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

Here is the updated fiddle

edited Apr 01 '15 at 15:56

answered Apr 01 '15 at 15:45

Timur Osadchiy

5,699
2
26
28

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

1 Answers1