Remember HTML dropdown value if registration page reloads - php

Question

I have a WordPress page where the default login/signup page is disabled and I let users register via a WooCommerce login/signup page with a bunch of custom fields added through my theme's functions.php.
One of those fields is a dropdown field that lets users select their country.
If a user misses something in the registration form and the page reloads (with an error message telling the user what was missing), the text fields are pre-populated with their previous text. The dropdown menu, however, reverts back to its neutral option instead of remembering its previous value.
My code looks like this:
<?php add_filter( 'woocommerce_register_form', 'adding_custom_registration_fields' );
function adding_custom_registration_fields($fields) {
$countries_obj = new WC_Countries();
$countries = $countries_obj->__get('countries'); ?>
<div class="form-row form-row-wide">
<label for="reg_billing_country"><?php _e( 'Country', 'woocommerce' ); ?> <span class="required">*</span></label>
<select class="country_select sk-required" data-sk-tooltip="Required" name="billing_country" id="reg_billing_country">
<option value=""> <?php _e('Select country','my-theme'); ?></option>
<?php foreach ($countries as $key => $value): ?>
<option value="<?php echo $key?>"><?php echo $value?></option>
<?php endforeach; ?>
</select>
</div>
I want the dropdown field to remember its value if the page reloads, just like the text fields do. Can I use html to encourage the browser to cache the value?
I tried
var selectedItem = sessionStorage.getItem("country_select_session");
$('#reg_billing_country').val(selectedItem);
$('#reg_billing_country').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("country_select_session", dropVal);
});
However, the value is only retained if I manually reload the page using F5. If the page reloads by clicking the "submit" button with an incomplete form, the dropdown menu reverts back to its default value, ignoring the script

Answer 1

I got it to work - turns out the script was not placed properly and thus did not get executed. Thanks to #mplungjan for pointing it out.
I added the script mentioned above right before the </body> tag with this code in my functions.php:
add_action( 'wp_footer', function () { ?>
<script language="javascript" type="text/javascript">
var selectedItem = sessionStorage.getItem("country_select_session");
$('#reg_billing_country').val(selectedItem);
$('#reg_billing_country').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("country_select_session", dropVal);
});
</script>
<?php } );
With the wp_footer action hook, the script got placed and executed properly.