Spree Billing/Shipping Address Checkbox I used JS to re-populate the shipping address into the billing address when a checkbox is clicked. I'm wondering whether there is a more concise/better way to write the code below:

var checkBox = document.getElementById('order_use_billing');

var shipFirstName = document.getElementById('order_ship_address_attributes_firstname');
var billFirstName = document.getElementById('order_bill_address_attributes_firstname');
var shipLastName = document.getElementById('order_ship_address_attributes_lastname');
var billLastName = document.getElementById('order_bill_address_attributes_lastname');
var shipStreet = document.getElementById('order_ship_address_attributes_address1');
var billStreet = document.getElementById('order_bill_address_attributes_address1');
var shipStreetTwo = document.getElementById('order_ship_address_attributes_address2');
var billStreetTwo = document.getElementById('order_bill_address_attributes_address2');
var shipState = document.getElementById('order_ship_address_attributes_state_id');
var billState = document.getElementById('order_bill_address_attributes_state_id');
var shipCity = document.getElementById('order_ship_address_attributes_city');
var billCity = document.getElementById('order_bill_address_attributes_city');
var shipCountry = document.getElementById('order_ship_address_attributes_country_id');
var billCountry = document.getElementById('order_bill_address_attributes_country_id');
var shipZip = document.getElementById('order_ship_address_attributes_zipcode');
var billZip = document.getElementById('order_bill_address_attributes_zipcode');
var shipPhone = document.getElementById('order_ship_address_attributes_phone');
var billPhone = document.getElementById('order_bill_address_attributes_phone');

$(function(){
   $('input[type=checkbox]').prop("checked", false);
});

function filling(){

  if(checkBox.checked == true) {
    shipFirstName.value       = billFirstName.value;
    shipLastName.value        = billLastName.value
    shipStreet.value          = billStreet.value
    shipStreetTwo.value       = billStreetTwo.value
    shipCity.value            = billCity.value
    shipState.value           = billState.value
    shipCountry.value         = billCountry.value
    shipZip.value             = billZip.value
    shipPhone.value           = billPhone.value

  }
   if(checkBox.checked == false) {
    shipFirstName.value       = "";
    shipLastName.value        = "";
    shipStreet.value          = "";
    shipStreetTwo.value       = "";
    shipCity.value            = "";
    shipState.value           = "";
    shipCountry.value         = "";
    shipZip.value             = "";
    shipPhone.value           = "";

  }
};

$(function() { 
    $('input[type="checkbox"]').on('change', function() {
         filling();
    });
});
My approach for something like this would be to have the two (sub-)forms wrapped in a grouping element such as a fieldset and just loop over all fields in one and match them with the other. Quick incomplete, untested example:

&lt;form&gt;
  &lt;fieldset id="shipping-address"&gt;
    &lt;input name="shipping-firstname"&gt;
    &lt;input name="shipping-lastname"&gt;
  &lt;/fieldset&gt;
  &lt;fieldset id="billing-address"&gt;
    &lt;input name="billing-firstname"&gt;
    &lt;input name="billing-lastname"&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;

&lt;script&gt;
  $("shipping-address input").each(function() {
    var shippingInput = $(this);
    var billingInputName = "billing" + shippingInput.attr("name").slice(8);
    $("#billing-address [name=" + billingInputName + "]").val(shippingInput.val());
  });
&lt;/script&gt;