Now you can click buttons and they do things.

html/ListingBootstrap.html

@@ -51,38 +51,23 @@
     <div class="col-sm-3 col-md-2 sidebar" style = "display: inline-block; border-right-style: solid; height: 100%; width: 200px;">
           <ul class="nav nav-sidebar" style = "padding: 0px;">
             <h4>Device Options</h4>
-            <li><a href="#">Phones</a></li>
-            <li><a href="#">Tablets</a></li>
-            <li><a href="#">PCs</a></li>
+            <li class = "option" data-type = "iphone"><a href="#">iPhones</a></li>
+            <li class = "option" data-type = "ipad"><a href="#">iPad</a></li>
+            <li class = "option" data-type = "computerStick"><a href="#">Computer Sticks</a></li>
           </ul>
           <br>
           <ul class="nav nav-sidebar" style = "padding: 0px;">
             <h4>Operating Systems</h4>
-            <li><a href="#">Linux</a></li>
-            <li><a href="#">Windows</a></li>
-            <li><a href="#">OSX</a></li>
+            <li class = "option" data-type = "intel"><a href="#">Intel</a></li>
+            <li class = "option" data-type = "apple"><a href="#">Apple</a></li>
           </ul>
     </div>
 
     <div style = "display: inline-block; position: absolute; padding-left: 30px;">
         <h2>Available Devices</h2>
-        <div style="border: solid; border-width: thin; padding: 15px;">
-          <div style = "display: inline-block; text-align: center;">
-          <img src="imgs/iphone.png" style="display: block;">
-          George
-          </div>
-          <div style="display: inline-block; width: 200px; text-align: center; vertical-align: center;"><p>George is probably the coolest iPhone to exist. Ever. Point blank, period.</p><button type="button" style="display: block; margin: auto;">Order device</button>
-          </div>          
-        </div>
-        <br>
-        <div style="border: solid; border-width: thin; padding: 15px;">
-          <div style = "display: inline-block; text-align: center;">
-          <img src="imgs/ipad.png" style="display: block;">
-          Linkin Park
-          </div>
-          <div style="display: inline-block; width: 200px; text-align: center; vertical-align: center;"><p>"The hardest part of ending is starting again."</p><button type="button" style="display: block; margin: auto;">Order device</button>
-          </div>          
-        </div>
-    </div>
+		<div id = "devContainer"></div>   
+	</div>
+
+	<script src="ListingBootstrap.js"></script>
 </body>
 </html>

html/ListingBootstrap.js

@@ -0,0 +1,64 @@
+//get all the option buttons
+var options = document.getElementsByClassName('option');
+
+var dev1 = {
+	name:"George",
+	description:"George is probably the coolest iPhone to exist. Ever. Point blank, period.",
+	hardware:"iphone",
+	software:"apple"
+};
+
+var dev2 = {
+	name:"Greyson",
+	description:"Greyson is pretty cool.. I guess.",
+	hardware:"iphone",
+	software:"apple"
+};
+
+var dev3 = {
+	name:"Linkin Park",
+	description:'"The hardest part of ending is starting again."',
+	hardware:"ipad",
+	software:"apple"
+};
+
+var dev4 = {
+	name:"Abercrombie",
+	description:"To all the people that hated me in high school, I have the prettiest clothes you all wear now!!",
+	hardware:"ipad",
+	software:"apple"
+};
+
+var dev5 = {
+	name:"Hulk",
+	description:"Go ahead and HULK SMASH! this awesome computer stick into your USB.",
+	hardware:"computerStick",
+	software:"intel"
+};
+
+var dev6 = {
+	name:"Captain America",
+	description:'"Make America Great Again. Wait, thats someone else.."',
+	hardware:"computerStick",
+	software:"intel"
+};
+
+var devices = [dev1, dev2, dev3, dev4, dev5, dev6];
+
+for(var a = 0; a < options.length; a++){
+	var type = options[a].getAttribute('data-type');
+	options[a].addEventListener('click', show);
+}
+
+function show(){
+	var type = this.getAttribute('data-type');
+	var html = '';
+
+	for(var i = 0; i < devices.length; i++){
+		if(type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0){
+			html += '<div style="border: solid; border-width: thin; padding: 15px;"><div style = "display: inline-block; text-align: center;"><img src="imgs/' + devices[i].hardware + '.png" style="display: block;">' + devices[i].name + '</div><div style="display: inline-block; width: 200px; text-align: center; vertical-align: center;"><p>' + devices[i].description + '</p><button type="button" style="display: block; margin: auto;">Order device</button></div></div><br>'
+		}
+	}
+
+	document.getElementById('devContainer').innerHTML = html;
+}