unable to copy WooCommerce checkout state field values from billing to shipping, or vice versa


I’m trying to modify the WooCommerce checkout display so that:

  1. Both field columns are open and expanded
  2. There is a checkbox under shipping address, which upon clicking, copies data over from the billing fields to the shipping fields.

I’ve got that part set up, but though the state data is copied over from one area to another, upon trying to place order, the error message of “Shipping State is a required field.
No shipping method has been selected.” is displayed.

I’m presuming that the data upon manually using the state select field is being recorded somewhere other than the DOM, which is why it’s not working?

Here’s my jQuery code that’s doing the copying:

<script type="text/javascript">
$("#ship-to-billing-address-checkbox").on("click", function(){
    // if (this.checked) {
        $("(name='shipping_first_name')").val($("(name='billing_first_name')").val());
        $("(name='shipping_last_name')").val($("(name='billing_last_name')").val());
        $("(name='shipping_address_1')").val($("(name='billing_address_1')").val());
        $("(name='shipping_address_2')").val($("(name='billing_address_2')").val());
        $("(name='shipping_city')").val($("(name='billing_city')").val());
        $("(id='select2-shipping_state-container')").text($("(id='select2-billing_state-container')").text());
        $("(name='shipping_postcode')").val($("(name='billing_postcode')").val());
        $("(name='shipping_country')").val($("(name='billing_country')").val());
});

If you want to see it in action, go to https://stage.chilwellness.com/checkout/?add-to-cart=12105. Enter your info in billing, click the checkbox, then you’ll see that though the state field seems entered, the label is still the color red, indicating that it’s needing data still.