I have a table with order items, with a quantity input box and a field with the quantity that has been ordered.
If the quantity input box has the same value as the quantity that has been ordered, I want it to color green.
Now I have it working a bit, but my knowledge only goes so far. Somehow it only works if I click the items in order, so I have to click the input box on row one.. and when it matches the ordered quantity it works.
But if I click the second row-item first.. it won’t work.
This is the Jquery. How do I edit this so it doesn’t matter which row I use first?
jQuery('.qtyplus').click(function(e) {
e.preventDefault();
var $this = jQuery(this);
var $target = $this.prev('input[name=' + $this.attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal)) {
$target.val(currentVal + 1);
} else {
$target.val(0);
}
});
jQuery(".qtyminus").click(function(e) {
e.preventDefault();
var $this = jQuery(this);
var $target = $this.next('input[name=' + $this.attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal)) {
$target.val((currentVal == 0) ? 0 : currentVal - 1);
} else {
$target.val(0);
}
});
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e) {
e.preventDefault();
var table = document.getElementById('order_line_items');
var length = table.rows.length;
var x = document.getElementsByTagName("tr");
for (var i = 0; i < x.length; i++) {
var $qty = jQuery('#quantity').val();
var $hoeveelheid = document.querySelector("#hoeveelheid").innerHTML;
var $qtyrow = $qty[i];
var $hoeveelheidrow = $hoeveelheid[i];
if ($qtyrow == $hoeveelheidrow) {
jQuery(this).closest("tr").css('background-color', '#00FF00');
}
}
});
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e) {
e.preventDefault();
var table = document.getElementById('order_line_items');
var length = table.rows.length;
var x = document.getElementsByTagName("tr");
for (var i = 0; i < x.length; i++) {
var $qty = jQuery('#quantity').val();
var $hoeveelheid = document.querySelector("#hoeveelheid").innerHTML;
var $qtyrow = $qty[i];
var $hoeveelheidrow = $hoeveelheid[i];
if ($qtyrow != $hoeveelheidrow) {
jQuery(this).closest("tr").css('background-color', '#FFFFFF');
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" class="woocommerce_order_items">
<thead>
<tr>
<th class="item sortable" colspan="2" data-sort="string-ins">Artikel</th>
<th>Barcode</th><th>Geteld</th><th>hoeveel</th> <th class="item_cost sortable" data-sort="float">Kosten</th>
<th class="quantity sortable" data-sort="int">Aantal</th>
<th class="line_cost sortable" data-sort="float">Totaal</th>
<th class="line_tax tips">
Producten BTW Hoog <input type="hidden" class="order-tax-id" name="order_taxes[396]" value="1">
<a class="delete-order-tax" href="#" data-rate_id="396"></a>
</th>
<th class="wc-order-edit-line-item" width="1%"> </th>
</tr>
</thead>
<tbody id="order_line_items">
<tr class="item " data-order_item_id="393" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img width="150" height="150" src="" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy" title=""></div> </td>
<td class="name" data-sort-value="testing (kopie)">
<a href="" class="wc-order-item-name">testing (kopie)</a><div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234-1</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="393">
<input type="hidden" name="order_item_tax_class[393]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td> <td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td><td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" width="1%" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
</td>
<td class="quantity" width="1%">
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[393]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[393]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" width="1%" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[393]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[393]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[393]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" width="1%">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[393][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[393][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[393][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" width="1%">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a><a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
<tr class="item " data-order_item_id="394" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img width="150" height="150" src="" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy" title=""></div> </td>
<td class="name" data-sort-value="testing">
<a href="" class="wc-order-item-name">testing</a><div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="394">
<input type="hidden" name="order_item_tax_class[394]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td> <td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td><td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" width="1%" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
</td>
<td class="quantity" width="1%">
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[394]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[394]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" width="1%" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[394]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[394]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[394]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" width="1%">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[394][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[394][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[394][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" width="1%">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a><a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_fee_line_items">
</tbody>
<tbody id="order_shipping_line_items">
<tr class="shipping " data-order_item_id="395">
<td class="thumb"><div></div></td>
<td class="name">
<div class="view">
Thuis bezorgen </div>
<div class="edit" style="display: none;">
<input type="hidden" name="shipping_method_id[]" value="395">
<input type="text" class="shipping_method_name" placeholder="Verzendnaam" name="shipping_method_title[395]" value="Thuis bezorgen">
<select class="shipping_method" name="shipping_method[395]">
<optgroup label="Verzendmethode">
<option value="">Niet beschikbaar</option>
<option value="flat_rate">Vast Tarief</option><option value="free_shipping">Gratis verzending</option><option value="local_pickup">Afhalen</option><option value="dhlpwc" selected="selected">DHL in WooCommerce</option><option value="other">Anders</option> </optgroup>
</select>
</div>
<div class="view">
<table cellspacing="0" class="display_meta">
<tbody><tr>
<th>sort_position:</th>
<td><p>1</p>
</td>
</tr>
</tbody></table>
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
<tr data-meta_id="2887">
<td>
<input type="text" maxlength="255" placeholder="Naam (vereist)" name="meta_key[395][2887]" value="sort_position">
<textarea placeholder="Waarde (vereist)" name="meta_value[395][2887]">1</textarea>
</td>
<td width="1%"><button class="remove_order_item_meta button">×</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td> <td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td><td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" width="1%"> </td>
<td class="quantity" width="1%"> </td>
<td class="line_cost" width="1%">
<div class="view">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>0,00</span> </div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_cost[395]" placeholder="0" value="0,00" class="line_total wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[395]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" width="1%">
<div class="view">
– </div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_taxes[395][1]" placeholder="0" value="" class="line_tax wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[395][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item" href="#"></a><a class="delete-order-item" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_refunds">
</tbody>
</table>Advertisement
Answer
First define a function for set color that it accept closest row of +/- buttons and quantity input as argument
and use that in events
// Define function
function set_color(row_element)
{
if( parseInt($(row_element).find('.qty').val()) == parseInt($(row_element).find('.hoeveelheid').text()) )
{
$(row_element).css('background-color', '#00FF00');
} else
{
$(row_element).css('background-color', '#FFFFFF');
}
}
jQuery('.qtyplus').click(function(e) {
e.preventDefault();
// Get closest row element
var row_element = $(this).closest('tr');
var $target = $(this).prev('input[name=' + $(this).attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal)) {
$target.val(currentVal + 1);
} else {
$target.val(0);
}
set_color(row_element);
});
jQuery(".qtyminus").click(function(e) {
e.preventDefault();
;
// Get closest row element
var row_element = $(this).closest('tr');
var $target = $(this).next('input[name=' + $(this).attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal)) {
$target.val((currentVal == 0) ? 0 : currentVal - 1);
} else {
$target.val(0);
}
set_color(row_element);
});
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e) {
e.preventDefault();
// Get closest row element
var row_element = $(this).closest('tr');
set_color(row_element);
});
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e) {
e.preventDefault();
// Get closest row element
var row_element = $(this).closest('tr');
set_color(row_element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" class="woocommerce_order_items">
<thead>
<tr>
<th class="item sortable" colspan="2" data-sort="string-ins">Artikel</th>
<th>Barcode</th>
<th>Geteld</th>
<th>hoeveel</th>
<th class="item_cost sortable" data-sort="float">Kosten</th>
<th class="quantity sortable" data-sort="int">Aantal</th>
<th class="line_cost sortable" data-sort="float">Totaal</th>
<th class="line_tax tips">
Producten BTW Hoog <input type="hidden" class="order-tax-id" name="order_taxes[396]" value="1">
<a class="delete-order-tax" href="#" data-rate_id="396"></a>
</th>
<th class="wc-order-edit-line-item" width="1%"> </th>
</tr>
</thead>
<tbody id="order_line_items">
<tr class="item " data-order_item_id="393" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img width="150" height="150" src="" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy" title=""></div>
</td>
<td class="name" data-sort-value="testing (kopie)">
<a href="" class="wc-order-item-name">testing (kopie)</a>
<div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234-1</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="393">
<input type="hidden" name="order_item_tax_class[393]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td>
<td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td>
<td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" width="1%" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
</td>
<td class="quantity" width="1%">
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[393]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[393]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" width="1%" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[393]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[393]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[393]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" width="1%">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[393][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[393][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[393][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" width="1%">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a>
<a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
<tr class="item " data-order_item_id="394" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img width="150" height="150" src="" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy" title=""></div>
</td>
<td class="name" data-sort-value="testing">
<a href="" class="wc-order-item-name">testing</a>
<div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="394">
<input type="hidden" name="order_item_tax_class[394]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td>
<td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td>
<td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" width="1%" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
</td>
<td class="quantity" width="1%">
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[394]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[394]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" width="1%" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[394]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[394]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[394]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" width="1%">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[394][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[394][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[394][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" width="1%">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a>
<a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_fee_line_items">
</tbody>
<tbody id="order_shipping_line_items">
<tr class="shipping " data-order_item_id="395">
<td class="thumb">
<div></div>
</td>
<td class="name">
<div class="view">
Thuis bezorgen </div>
<div class="edit" style="display: none;">
<input type="hidden" name="shipping_method_id[]" value="395">
<input type="text" class="shipping_method_name" placeholder="Verzendnaam" name="shipping_method_title[395]" value="Thuis bezorgen">
<select class="shipping_method" name="shipping_method[395]">
<optgroup label="Verzendmethode">
<option value="">Niet beschikbaar</option>
<option value="flat_rate">Vast Tarief</option>
<option value="free_shipping">Gratis verzending</option>
<option value="local_pickup">Afhalen</option>
<option value="dhlpwc" selected="selected">DHL in WooCommerce</option>
<option value="other">Anders</option>
</optgroup>
</select>
</div>
<div class="view">
<table cellspacing="0" class="display_meta">
<tbody>
<tr>
<th>sort_position:</th>
<td>
<p>1</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
<tr data-meta_id="2887">
<td>
<input type="text" maxlength="255" placeholder="Naam (vereist)" name="meta_key[395][2887]" value="sort_position">
<textarea placeholder="Waarde (vereist)" name="meta_value[395][2887]">1</textarea>
</td>
<td width="1%"><button class="remove_order_item_meta button">×</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td>
<td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td>
<td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" width="1%"> </td>
<td class="quantity" width="1%"> </td>
<td class="line_cost" width="1%">
<div class="view">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>0,00</span>
</div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_cost[395]" placeholder="0" value="0,00" class="line_total wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[395]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" width="1%">
<div class="view">
– </div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_taxes[395][1]" placeholder="0" value="" class="line_tax wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[395][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item" href="#"></a>
<a class="delete-order-item" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_refunds">
</tbody>
</table>I do not know how much control you have over the your HTML structure, because then we could have a cleaner HTML and js code.
for example:
you have many rows with same id that It is not common,
OR
you used this code var $target = $(this).next('input[name=' + $(this).attr('field') + ']'); for get quantity input that I think it’s not necessary. you can use quantity instead of + $(this).attr('field') +
And examples like these.
I say again Since I do not know the complete structure of the page, I guess you may have reasons and limitations and I tried not to change too much but you can do it much easier
good luck