Cacher is the code snippet organizer for pro developers

<!-- Example New Address Form ===================== -->
<div id="AddAddress" class="form-new-address" style="display: none;">
  {% form 'customer_address', customer.new_address %}

  <h4 class="section-header green">Add Address</h4>

  <input type="text" id="AddressFirstName" name="address[first_name]" value="" placeholder="First Name" >
  <input type="text" id="AddressLastName" name="address[last_name]" value="" placeholder="Surname" >
  <input type="text" id="AddressCompany" name="address[company]" value="" placeholder="Company" >
  <input type="text" id="AddressAddress1" name="address[address1]" value="" placeholder="Address Line 1" >
  <input type="text" id="AddressAddress2" name="address[address2]" value="" placeholder="Address Line 2" >
  <input type="text" id="AddressCity" name="address[city]" value="" placeholder="City" >
  
  <select id="AddressCountry" name="address[country]" data-default="">{{ country_option_tags }}</select>
  <div id="AddressProvinceContainer" style="display:none">
    <select id="AddressProvince" name="address[province]" data-default="{{ form.province }}"></select>
  </div>

  <input type="text" id="AddressZip" name="address[zip]" value="" placeholder="Postcode" autocapitalize="characters">
  <input type="tel" id="AddressPhone" name="address[phone]" value="" placeholder="Phone" >

  <p>
    {{ form.set_as_default_checkbox }}
    <label for="address_default_address" class="inline">Set as default address</label>
  </p>

  <input type="submit" class="btn btn--full btn-green" value="Confirm">
  <a href="#" class="btn btn--full" data-toggleaddress="new">Cancel</a>
  
  {% endform %}
</div>
<!-- //New Address Form -->

var Addresses = (function() {

  // toggle visibility of an address form, use data-toggleaddress="new" for the
  // new address form, this function can be modified to work with a popup.
  function toggleForm(e) {
    e.preventDefault();
    
    if($(this).data('toggleaddress') && $(this).data('toggleaddress')!=='new') {
      $('#EditAddress_'+$(this).data('toggleaddress')).toggle();
    } else {
      // the new address form container should have id="AddAddress"
      $('#AddAddress').toggle();
    }
  }
  
  // delete an address
  function destroy(e) {
    e.preventDefault();
    var addId = $(this).data('destroyaddress');
    
    if (confirm('Are you sure you wish to delete this address?')) {
      Shopify.postLink(
        '/account/addresses/'+addId, 
        {'parameters': {'_method': 'delete'}}
      );
    }
  }
  
  function init() {
    if(!$('[data-toggleaddress]').length) return false;
    
    if($('#AddressCountry').length) {
      // Initialize country observer on the new address form
      new Shopify.CountryProvinceSelector('AddressCountry', 'AddressProvince', {
        hideElement: 'AddressProvinceContainer'
      });
    }

    $('[data-toggleaddress]').click(toggleForm);
    $('[data-destroyaddress]').click(destroy);
    
    // TIP: use this to move all the edit address forms outside their container
    // may be usefull if you are not using a popup
    // $('.form-edit-address').appendTo('.main-content');
  }
  
  return function() { 
    $(init);
  }
  
})();

// include modules
Addresses();

{% comment %}

This include requires you pass in two variables.
{{ add }}: The address being listed
{{ edit }}: Boolean value if the address can be edited on this page

Example: 
{% for address in customer.addresses %}
  {% include 'address_summary', add: address, edit: true %}
{% endfor %}

{% endcomment %}

<!-- Address Summary ===================== -->
<p>
  {{ add.name }}<br />
  
  {% if add.address1 > "" %}
  	{{ add.address1 }}, 
  {% endif %}

  {% if add.address2 > "" %}
    {{ add.address2 }}, 
  {% endif %}
  
  {% if add.company > "" %}
    <br />{{ add.company }}, 
  {% endif %}

  {% if add.city > "" %}
    <br />{{ add.city }}, 
  {% endif %}

  {% if add.province > "" %}
    <br />{{ add.province }}, 
  {% endif %}

  {% if add.zip > "" %}
    {{ add.zip | upcase }}, 
  {% endif %}

  {% if add.country > "" %}
    <br />{{ add.country }}, 
  {% endif %}

  {% if add.phone > "" %}
    <br />{{ add.phone }}
  {% endif %}
  
  {% if edit == true %}
    <br />
  	<a href="#" data-toggleaddress="{{ add.id }}">Edit</a> •
    <a href="#" data-destroyaddress="{{ add.id }}">Delete</a>
  {% endif %}
</p>
<!-- //Address Summary -->

{% if edit == true %}

<!-- Edit Address Form ===================== -->
<div id="EditAddress_{{ add.id }}" class="form-edit-address" style="display:none;">
  {% form 'customer_address', add %}

  <h4 class="section-header green">Edit Address</h4>

  <input type="text" id="AddressFirstName_{{ add.id }}" name="address[first_name]" value="{{ add.first_name }}" placeholder="First Name" >
  <input type="text" id="AddressLastName_{{ add.id }}" name="address[last_name]" value="{{ add.last_name }}" placeholder="Surname" >
  <input type="text" id="AddressCompany_{{ add.id }}" name="address[company]" value="{{ add.company }}" placeholder="Company" >
  <input type="text" id="AddressAddress1_{{ add.id }}" name="address[address1]" value="{{ add.address1 }}" placeholder="Address Line 1" >
  <input type="text" id="AddressAddress2_{{ add.id }}" name="address[address2]" value="{{ add.address2 }}" placeholder="Address Line 2" >
  <input type="text" id="AddressCity_{{ add.id }}" name="address[city]" value="{{ add.city }}" placeholder="City" >
  
  <select id="AddressCountry_{{ add.id }}" name="address[country]" data-default="{{ add.country }}">{{ country_option_tags }}</select>
  <div id="AddressProvinceContainer_{{ add.id }}" style="display:none">
    <select id="AddressProvince_{{ add.id }}" name="address[province]" data-default="{{ form.province }}"></select>
  </div>

  <input type="text" id="AddressZip_{{ add.id }}" name="address[zip]" value="{{ add.zip }}" placeholder="Postcode" autocapitalize="characters">
  <input type="tel" id="AddressPhone_{{ add.id }}" name="address[phone]" value="{{ add.phone }}" placeholder="Phone" >

  <p>
    {{ form.set_as_default_checkbox }}
    <label for="address_default_address_{{ add.id }}" class="inline">Set as default address</label>
  </p>

  <input type="submit" class="btn btn--full btn-green" value="Confirm">
  <a href="#" class="btn btn--full" data-toggleaddress="{{ add.id }}">Cancel</a>

  {% endform %}
</div>
<!-- //Edit Address Form ===================== -->

<script>
  // Observe changes to the country selector to show/hide the provice selector 
  // appropriately 
  new Shopify.CountryProvinceSelector(
    'AddressCountry_{{ add.id }}', 
    'AddressProvince_{{ add.id }}', 
    { hideElement: 'AddressProvinceContainer_{{ add.id }}' }
  );
</script>

{% endif %}