diff --git a/examples/resources/common.js b/examples/resources/common.js
index cf08daeb91..623f8bea92 100644
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -1,6 +1,10 @@
 (function() {
-  var clipboard = new Clipboard('#copy-button');
-  clipboard.on('success', function(e) {
+  var htmlClipboard = new Clipboard('#copy-html-button');
+  htmlClipboard.on('success', function(e) {
+    e.clearSelection();
+  });
+  var jsClipboard = new Clipboard('#copy-js-button');
+  jsClipboard.on('success', function(e) {
     e.clearSelection();
   });
 
diff --git a/examples/resources/layout.css b/examples/resources/layout.css
index 021776f301..3cc66a1072 100644
--- a/examples/resources/layout.css
+++ b/examples/resources/layout.css
@@ -91,13 +91,13 @@ pre[class*="language-"] {
   background: #FFFFFF;
 }
 
-#source-controls {
+.source-controls {
   position: absolute;
   margin-top: 20px;
   right: 40px;
 }
 
-#source-controls a {
+.source-controls a {
   margin-left: 15px;
 }
 
diff --git a/examples/templates/example.html b/examples/templates/example.html
index 5ecbafe2c4..83fc621c19 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -113,8 +113,7 @@
       </div>
 
       <div class="row-fluid">
-        <div id="source-controls">
-          <a id="copy-button" data-clipboard-target="#example-source"><i class="fa fa-clipboard"></i> Copy</a>
+        <div class="source-controls">
           <!-- <a id="codepen-button"><i class="fa fa-codepen"></i> Edit</a> -->
         </div>
         <form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
@@ -125,7 +124,12 @@
           <textarea class="hidden" name="html">{{ contents }}</textarea>
           <input type="hidden" name="data">
         </form>
-        <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
+        <hr>
+        <pre>index.html</pre>
+        <div class="source-controls">
+          <a id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard"></i> Copy</a>
+        </div>
+        <pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;{{ title }}&lt;/title&gt;
@@ -138,10 +142,15 @@
 {{ indent css.source spaces=6 }}    &lt;/style&gt;{{/if}}
   &lt;/head&gt;
   &lt;body&gt;
-{{ indent contents spaces=4 }}    &lt;script&gt;
-{{ indent js.source spaces=6 }}    &lt;/script&gt;
+{{ indent contents spaces=4 }}    &lt;script src="index.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
 &lt;/html&gt;</code></pre>
+        <br>
+        <pre>index.js</pre>
+        <div class="source-controls">
+          <a id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard"></i> Copy</a>
+        </div>
+        <pre><code id="example-js-source" class="language-js">{{ js.source }}</code></pre>
       </div>
     </div>