jQuery move an element inside of elements parent

Question

I got a list of orders where I would like order date to be placed right after the order ID. I am therefore trying to move the element .order_date.column-order_date is it's placed right after a.wcpv-vendor-order-by-id. In this matter I am using jQuery .append

jQuery(document).ready(function($){
$( "a.wcpv-vendor-order-by-id" ).append( $( ".order_date.column-order_date" ) );
});

However, when I append it moves all of the order dates right after the orderID. Therefore, I end up with the order ID and then 15 different dates right after. How can I append, so it only moves order date inside of its parent?

The order list I am working is looking like this:

<tbody id="the-list" data-wp-lists="list:order">
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
</tbody>

Inside each order it looks like this:

<tr class="order-hold">
    <th scope="row" class="check-column">
        <input type="checkbox" name="ids[43]" value="61">
    </th>
    <td class="order_id column-order_id has-row-actions column-primary orange-me" data-colname="Booking"><a href="https://example.com/wp-admin/admin.php?page=wcpv-vendor-order&amp;id=1749" class="wcpv-vendor-order-by-id">1749</a>
        <button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button>
    </td>
    <td class="order_status column-order_status" data-colname="Booking status"><span class="wcpv-order-status-pending">Pending</span></td>
    <td class="order_date column-order_date" data-colname="Booking dato">July 4, 2019 10:47 am</td>
    <td class="shipping_address column-shipping_address" data-colname="Shipping"></td>
    <td class="product_name column-product_name" data-colname="Talent:"><a class="post-edit-link" href="https://example.com/wp-admin/post.php?post=1057&amp;action=edit">1x Faustix</a></td>
    <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></span>
    </td>
    <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td>
    <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td>
    <td class="fulfillment_status column-fulfillment_status" data-colname="Udførselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td>
</tr>

I would expect order date to move right after the order ID but only inside its parent.

Answer 1

You could iterate to get each individual case, and then limit the selection of the order_date element to the tr element's descendants:

$("a.wcpv-vendor-order-by-id").each(function () {
    $(this).append( $(".order_date.column-order_date", $(this).closest("tr")) );
});