insertafter data stuck in the cell above it

Question

I am having an issue where my .insertafter data is showing up stuck inside one cell of its parent data despite the fact it is its own row with its own div. (Please see the picture below)

The AJAX code that is grabbing the data for the insertafter is as follows:

function options(id){           
        jQuery.ajax({
        type: 'post',       url: my_ajax.ajax_url,      
        data: {             action: 'options_function',
        cid : id
        },      
success: function (data) {
var $newElement=jQuery("<div>",
{id:'ideal_option',html:data}
)
$newElement.insertAfter(jQuery('[data-id="' + id + '"]').closest('tr'))

Here is the PHP and HTML for the table itself.

echo "<table id ='ideal_option' >"; 
        echo '<tr style="display:inline-table; width:100%">';
        echo '<th>' . "Table". '</th>', '<th>' . "Size". '</th>', '<th>' . "Name". '</th>', '<th>' . "Party". '</th>';
        echo '</tr>';
        echo '<tr>';
foreach($check_availability as $available){ 
    $tbl_id=$available->id;
    $foh_nmbr=$available->FOH_Number;
    $tbl_type=$available->Type;
    echo '<tr>';
    echo '<td>' . $foh_nmbr . '</td>';
    echo '<td>' . $tbl_type . '</td>';
    echo("<td><select>");
foreach($Staff_On_Duty as $person){         
    echo("<option value = $sf_name_option&nbsp;$sl_name_option");
    if (($sf_name_option == $sf_name) && ($sl_name_option == $sl_name)) echo (" selected"); 
    echo(">$sf_name_option&nbsp;$sl_name_option</option>"); 
}
echo("</select></td>");
    
    echo '<td>' . "<button id='party' class='button' onclick='party($tbl_id, $cid)'><i class='icon fas fa-globe'></i></button>" . '</td>'; 
echo '</tr>';}
echo '</table>';

I have tried adding styles to the table such as width:100% and display (literally tried them all) but nothing takes this whole table out of the cell above it.

EDIT 1 using the suggestion of

jQuery('[data-id="' + id + '"]').closest('tr').find('td:last').append($newElement) It places the appended data next to instead of under. I have tried all display types on the tbody but none place the data under the row.

EDIT 2 when using this code, the result is

var $newTR = jQuery("<tr>")
var $newTD = jQuery("<td>",{id:'ideal_option',html:data, colspan:4}) // I assume 4 columns
$newTR.append($newTD)

// Then here, .insertAfter() is the right method
$newTR.insertAfter(jQuery('[data-id="' + id + '"]'))

Edit 3 the code:

var $newElement=jQuery("<tr>",
{id:'ideal_option',html:data}
)
$newElement.insertAfter(jQuery('[data-id="' + id + '"]').closest('tr'))

provides:

Answer 1

jQuery .insertAfter() is inserting an element after the target provided as argument.

So here, $newElement.insertAfter(jQuery('[data-id="' + id + '"]').closest('tr')), is inserting a <dvi> element after the closing tag of the closest tr element.

Even if you fix the dvi obvious typo...

You would be inserting a <div> element inside a <table> and therefore is invalid HTML.

I guess you should look for the .append() method instead...

That would be something like this, to append a div to the last td of a tr:

jQuery('[data-id="' + id + '"]').closest('tr').find('td:last').append($newElement)

---

EDIT base on comment below.

This works-ish. It is placing the new div(yes typo) next to instead of under the row.

If you want to have an additional row under, Then create a td inside a tr!

Try this:

var $newTR = jQuery("<tr>")
var $newTD = jQuery("<td>",{id:'ideal_option',html:data, colspan:4}) // I assume 4 columns
$newTR.append($newTD)

// Then here, .insertAfter() is the right method
$newTR.insertAfter(jQuery('[data-id="' + id + '"]'))