Repeating file upload section

[Ben-Carter-CancerTools]

Hi I have encountered an odd bug where the file upload section repeats when an item on the page changes. Here is an example of what I mean: https://watch.screencastify.com/v/548OBsEuOfJoLtxmNaxg

Any ideas how I can prevent this?

Many thanks,

Ben

[Ben-Carter-CancerTools]

FYI I believe I have resolved this by changing the code in 'custom.js' to the following:

jQuery(document).ready(function($) { let poFieldInitiated = false;

$('body').on('change', 'input[name="payment_method"]', function() { if ($(this).val() === 'woocommerce_gateway_purchase_order' && !poFieldInitiated) { $('.payment_box.payment_method_woocommerce_gateway_purchase_order').append('

Purchase Order File (pdf)

');

  $("#po_number_field_file_placeholder_field").on('change', function() {
    let file_data = $("#po_number_field_file_placeholder_field").prop('files')[0];
    let form_data = new FormData();
    form_data.append('file', file_data);
    form_data.append('action', 'woo_order_file_upload');
    $('.woocommerce-checkout button[name=woocommerce_checkout_place_order]').attr("disabled", true);

    $.ajax({
      url: woo_order_po.ajax_object,
      type: 'POST',
      contentType: false,
      processData: false,
      data: form_data,
      success: function(responseBody) {
        $('.woocommerce-checkout button[name=woocommerce_checkout_place_order]').attr("disabled", false);
        let response = JSON.parse(responseBody);
        console.log(response.url);
        Cookies.set('po_current_order_url', response.url, { expires: 14 });
      }
    });
  });

  poFieldInitiated = true;
} else if ($(this).val() !== 'woocommerce_gateway_purchase_order' && poFieldInitiated) {
  // Remove the field if a different payment method is selected
  $('#po_file_fieldset').remove();
  poFieldInitiated = false;
}

}); });