JQuery Hiding/Disabling element is not working on all the pages

I have a strange behaviour (or I'm probably still newbie) on changing elements with JQuery.

I have a woocommerce form with the option for the user to select from a dropdown box a value to pickup a product. I could set up a default value and I pretend to lock that value to the user, i.e., display that information but disable the option to change the value on the dropdown.

Initially it was like this:

I could change with JQuery 3 elements, namely hiding the label above the dropdown, hiding the arrow of the dropdown and disabling the dropdown, and it was working properly on that same page (cart form):

after my changes

When on this form I click on the "Finalize the Purchase" button and the site moves to the page checkout, the same 3 elements are reverting back to its initial state (without my changes):

checkout page

Here's what I'm doing in JQuery:

$(document).ready( function(){
$('.select2-selection__arrow').removeClass('select2-selection__arrow');         
$('.pickup-location-current-lookup-area').hide();       
$('select[name="_shipping_method_pickup_location_id[0]"]').prop('disabled',true); })

Here's how to reproduce the issue example use diogo.mj.ferreira+perigo4@gmail.com as user and diogoferreira4 as password.

What I'm doing wrong? How can I change these 3 elements on both pages (cart and checkout)?

Thanks for helping.