diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js
index 5cedb02..66e53db 100644
--- a/src/jquery.uls.core.js
+++ b/src/jquery.uls.core.js
@@ -30,11 +30,11 @@
 				<div class="uls-search-wrapper"> \
 					<label class="uls-search-label" for="uls-languagefilter"></label>\
 					<div class="uls-search-input-wrapper">\
-						<span id="uls-languagefilter-clear" class="uls-languagefilter-clear"></span>\
+						<span class="uls-languagefilter-clear"></span>\
 						<input type="text" class="uls-filterinput uls-filtersuggestion"\
-							id="uls-filtersuggestion" disabled="true" autocomplete="off">\
+							disabled="true" autocomplete="off">\
 						<input type="text" class="uls-filterinput uls-languagefilter"\
-							id="uls-languagefilter" data-clear="uls-languagefilter-clear"\
+							data-clear="uls-languagefilter-clear"\
 							data-suggestion="uls-filtersuggestion"\
 							placeholder="Search for a language" autocomplete="off">\
 					</div>\
@@ -68,7 +68,7 @@
 		this.shown = false;
 		this.initialized = false;
 
-		this.$languageFilter = this.$menu.find( '#uls-languagefilter' );
+		this.$languageFilter = this.$menu.find( '.uls-languagefilter' );
 		this.$resultsView = this.$menu.find( '.uls-language-list' );
 
 		this.render();
diff --git a/src/jquery.uls.languagefilter.js b/src/jquery.uls.languagefilter.js
index 8a471c9..e22f0fc 100644
--- a/src/jquery.uls.languagefilter.js
+++ b/src/jquery.uls.languagefilter.js
@@ -46,8 +46,8 @@
 		this.options = $.extend( {}, $.fn.languagefilter.defaults, options );
 		this.$element.addClass( 'languagefilter' );
 		this.resultCount = 0;
-		this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) );
-		this.$clear = this.$element.parents().find( '#' + this.$element.data( 'clear' ) );
+		this.$suggestion = this.$element.parents().find( '.' + this.$element.data( 'suggestion' ) );
+		this.$clear = this.$element.parents().find( '.' + this.$element.data( 'clear' ) );
 		this.selectedLanguage = null;
 		this.init();
 		this.listen();
diff --git a/src/jquery.uls.lcd.js b/src/jquery.uls.lcd.js
index 58618bb..4719497 100644
--- a/src/jquery.uls.lcd.js
+++ b/src/jquery.uls.lcd.js
@@ -147,7 +147,7 @@
 
 				$section = $( '<div>' )
 					.addClass( 'uls-lcd-region-section hide' )
-					.attr( 'id', regionCode );
+					.attr( 'data-region', regionCode );
 
 				// Show a region heading, unless we are using a narrow ULS
 				if ( !narrowMode ) {
@@ -176,9 +176,9 @@
 			this.$noResults.addClass( 'hide' );
 			this.$element.children( '.uls-lcd-region-section' ).each( function () {
 				var $region = $( this ),
-					regionCode = $region.attr( 'id' );
+					regionCode = $region.data( 'region' );
 
-				if ( $region.is( '#uls-lcd-quicklist' ) ) {
+				if ( $region.is( '.uls-lcd-quicklist' ) ) {
 					return;
 				}
 
@@ -302,7 +302,7 @@
 		 * Adds quicklist as a region.
 		 */
 		quicklist: function () {
-			this.$element.find( '#uls-lcd-quicklist' ).removeClass( 'hide' );
+			this.$element.find( '.uls-lcd-quicklist' ).removeClass( 'hide' );
 		},
 
 		buildQuicklist: function () {
@@ -327,8 +327,7 @@
 			quickList.sort( $.uls.data.sortByAutonym );
 
 			$quickListSection = $( '<div>' )
-				.addClass( 'uls-lcd-region-section' )
-				.attr( 'id', 'uls-lcd-quicklist' );
+				.addClass( 'uls-lcd-region-section uls-lcd-quicklist' );
 
 			$quickListSectionTitle = $( '<h3>' )
 				.attr( 'data-i18n', 'uls-common-languages' )
@@ -356,7 +355,7 @@
 		},
 
 		empty: function () {
-			this.$element.find( '#uls-lcd-quicklist' ).addClass( 'hide' );
+			this.$element.find( '.uls-lcd-quicklist' ).addClass( 'hide' );
 		},
 
 		focus: function () {
@@ -374,7 +373,7 @@
 			}
 
 			$suggestions = this.buildQuicklist().clone();
-			$suggestions.removeClass( 'hide' ).removeAttr( 'id' );
+			$suggestions.removeClass( 'hide' );
 			$suggestions.find( 'h3' )
 				.data( 'i18n', 'uls-no-results-suggestion-title' )
 				.text( 'You may be interested in:' )