jQuery coloring table row if quantity is same

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%">&nbsp;</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%">&nbsp;</td>
    <td class="quantity" width="1%">&nbsp;</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>

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%">&nbsp;</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%">&nbsp;</td>
      <td class="quantity" width="1%">&nbsp;</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