Add new tbody set after removing current set

Question

I'm trying to remove all tbody rows and place with a new set however, my code below doesn't work. It removes them but I couldn't work out have to add new set of tbody set. I believe my output section is not ideal way of doing anyway. Please give me a hand.

I've checked these but to be honest, confused. - Adding rows to tbody of a table using jquery - jquery add and add

Thanks

HTML

<table class="table" id="add-new-yarn-table">
    <thead>
         <th>ID</th>
    </thead>

    <tr>
         <td>BELOW</td>
    </tr>

    <tbody class="filter-rows">
         <tr>
             <td>1</td>
         </tr>
    </tbody>
    <tbody class="filter-rows">
         <tr>
             <td>2</td>
         </tr>
    </tbody>
    <tbody class="filter-rows">
         <tr>
             <td>2</td>
         </tr>
    </tbody>
</table>

<span id='refreshTable()'>REMOVE OLD and ADD NEW SET</span>

JQUERY:

$('#refreshTable').click(function(event) {
    $.ajax({
        type    : 'POST',
        url     : 'hello.php',
        data    : {
            id  : '69'
        },
        success:function (data) {
                var output = '';

                $.each(data.data.records, function(index, value) {
                    var id = data.data.records[index]['id'];

                    output = output + '<tbody class="filter-rows">';
                    output = output + '<tr>';
                    output = output + '<td>' + id + '</td>';
                    output = output + '</tr>';
                    output = output + '</tbody>';
                });

                $('.filter-rows').remove();
                //ADD NEW ROWS SOMEWHRE HERE MAYBE
        }
    });
});

Answer 1

You don't have to remove the <tbody> at all, You can simply clear it using empty() and append() the new rows instead, as follows:

$('#refreshTable').click(function(event) {
$.ajax({
    type    : 'POST',
    url     : 'hello.php',
    data    : {
        id  : '69'
    },
    success:function (data) {
            var output = '';

            $.each(data.data.records, function(index, value) {
                var id = data.data.records[index]['id'];

                output +=  '<tr>';
                output +=  '<td>' + id + '</td>';
                output +=  '</tr>';
            });

            $('.filter-rows').empty().append(output);
    }
 });
});

In case if you actually must replace the existing <tbody> with new one, you can use replaceWith() in your original code as follows:

$('.filter-rows').replaceWith(output);

Answer 2

Just add them after the thead:

$("#add-new-yarn-table thead").after(output);

Answer 3

Try this

Declare output as

var output = '<thead> <th>ID</th> </thead> <tr> <td>BELOW</td> </tr> ';

Then have the same $.each section.

Then set the innerHTML for table itself as the variable output.