I am trying to take a table with some results in in and append it to another table row on a button click served by AJAX Jquery.
The function code currently is:

`#list-table` has a number of rows in it each with a button then when clicked fires the options function.

On success of that function is when I want to append the additional tables results `#ideal_option`. I want to make sure that the `#ideal-option` is being appended to the row I clicked the button in, not at the end of the `#list-table` table.

The above replaces the initial table with the new table instead of appending it. It does seem to be properly paired to the row however

How do I change this and make it right?

**FULL TABLE CODE WITH HTML**strong text****

HTML for initial table

So, you’re kind of tripping over yourself here.
Read up on [append](https://api.jquery.com/append/) and [html](https://api.jquery.com/html/)

Edit: Sorry, hit enter too soon.
What you’re doing is appending the row to the table via append, and then replacing the entire table with the data.

You don’t want ` jQuery(‘#list-table’).append(‘#ideal_option’ + id).html(data);` you want something like ` jQuery(‘#list-table’).find(‘#ideal_option’ + id).append(data);` (rough guessing, I haven’t tested the code an am making a few assumptions).

source