Wrapper for jQuery.syncHeight(). Allows you to have multiple instances on a page with specifically instantiating them.

syncHeightWrapper.js

  // Hastily plonked together by @replete, phil@replete.nu
  /* Use like this:
  
    <div class="some-html-chunk" data-sync-height="a-unique-name">Foo</div>
    <div class="some-other-html-chunk" data-sync-height="a-unique-name">Bar</div>
  */
  
  $('[data-sync-height]')
	.each(function(i,e){

		var syncID = $(e).attr('data-sync-height'),
			$syncHeight = $('[data-sync-height='+ syncID +']');

		//Creates load event for each instance, 'namespaced'.
		$(window)
		.on('load.sync-height-'+ syncID +' resize.sync-height-'+syncID +' orientationchange.sync-height-'+ syncID, function(){

			//Write your own logic here for when to set or unset syncHeight.
			if (App.breakpointName !== 'default') {
				$syncHeight.syncHeight();
			} else {
				$syncHeight.unSyncHeight();
			}
		})
		.trigger('resize.sync-height-'+syncID);
	});