1Works great with Dynamically created list. Reading in from a database.
2
3<style type="text/css">
4.fw-code-copy {
5 display: block;
6 position: relative;
7 width: 400px;
8 height: 30px;
9 background: #FFE;
10 border: thin solid #FF0;
11 margin-bottom: 0.5em;
12 padding: 0.5em;
13}
14.fw-code-copy-button {
15 position: absolute;
16 top: 8px;
17 right: 8px;
18 padding: 0.25em;
19 border: thin solid #777;
20 background: #800080;
21 color: #FFF;
22}
23.fw-code-copy-button:hover {
24 border: thin solid #DDD;
25 background: #992699;
26 cursor: pointer;
27}
28</style>
29
30<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
31<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
32
33<span class="fw-code-copy">
34 <span class="fw-code-copy-button">Copy</span>
35 <code><link rel="stylesheet" href="style-1.css"></code>
36</span>
37<span class="fw-code-copy">
38 <span class="fw-code-copy-button">Copy</span>
39 <code><link rel="stylesheet" href="style-2.css"></code>
40</span>
41<span class="fw-code-copy">
42 <span class="fw-code-copy-button">Copy</span>
43 <code><link rel="stylesheet" href="style-3.css"></code>
44</span>
45
46<script>
47new Clipboard(".fw-code-copy-button", {
48 text: function(trigger) {
49 return $(trigger).parent().find('code').first().text().trim();
50 }
51});
52</script>