multiple zeroclipboard buttons

Question

Having a hard time getting zeroclipboard to work with multiple buttons. I got it working with one (the first one) but I think my code is overcomplicated.

HTML:

<ul id="keylist" class="vertical-list list-parent">
    <li id="license_key_0">
      <div class="primary two-quarter unit-link">
        <img width="70" height="70" class="list-image media" src="/images/license-key.png">
        <dl class="meta">
          <dt>Auth Key</dt>
          <dd>313f7f5586b39cd9bf7a894894564036</dd>
          <dt>URL</dt>
          <dd>
            <span id="fe_text_0">
             http://localhost:3000/projects/313f7f5586b39cd9bf7a894894564036
            </span>

             <div style="position:relative" id="d_clip_container">
          <button title="Click me to copy to clipboard." class="my_clip_button" id="d_clip_button"><b>Copy To Clipboard...</b></button>
        </div>
          </dd>
          <dt>Expires</dt>
          <dd>Never</dd>
        </dl>
      </div>

    </li>
    <li id="license_key_1">
  <div class="primary two-quarter unit-link">
    <img width="70" height="70" class="list-image media" src="/images/license-key.png">
    <dl class="meta">

      <dt>Auth Key</dt>
      <dd>287a990d17b680fe410329cb95af89b9</dd>
      <dt>URL</dt>
      <dd>
        <span id="fe_text_1">
          http://localhost:3000/projects/287a990d17b680fe410329cb95af89b9
        </span>
        <div style="position:relative" id="d_clip_container">
          <button title="Click me to copy to clipboard." class="my_clip_button" id="d_clip_button"><b>Copy To Clipboard...</b></button>
        </div>
      </dd>
      <dt>Expires</dt>
      <dd>2012-11-16 23:39:00 -0500</dd>
    </dl>
  </div>
</li><li id="license_key_2">
  <div class="primary two-quarter unit-link">
    <img width="70" height="70" class="list-image media" src="/images/license-key.png">
    <dl class="meta">

      <dt>Auth Key</dt>
      <dd>ff381cdb94070e1903c5f6fddc31b148</dd>
      <dt>URL</dt>
      <dd>
        <span id="fe_text_2">
          http://localhost:3000/projects/ff381cdb94070e1903c5f6fddc31b148
        </span>
        <div style="position:relative" id="d_clip_container">
          <button title="Click me to copy to clipboard." class="my_clip_button" id="d_clip_button"><b>Copy To Clipboard...</b></button>
        </div>
      </dd>
      <dt>Expires</dt>
      <dd>2013-11-28 23:45:00 -0500</dd>
    </dl>
  </div>
</li>
  </ul>

Zeroclipboard JS:

   $j(document).ready(function () {

    var myDiv = document.getElementById("keylist");
    var displayNum = 0;
    var nodes = myDiv.getElementsByTagName("span");
    for (var index = 0; index < nodes.length; index++) {
        var node = nodes[index];
        if (node.id.indexOf("fe_text_") == 0) {
            node.id = "fe_text_" + displayNum;

            var clip = new ZeroClipboard.Client();
            ZeroClipboard.setMoviePath("/javascripts/ZeroClipboard.swf")
            clip.setHandCursor(true);

            code = $j("#" + node.id).html();
            clip.glue('d_clip_button');
            clip.addEventListener('mouseDown', function (client) {
                clip.setText(code);
            });

            //Add a complete event to let the user know the text was copied
            clip.addEventListener('complete', function (client, text) {
                alert("Copied text to clipboard: " + code);
            });
            displayNum++;
        }
    }
});

Answer 1

An id can only be used once. Your HTML contains multiple elements using the same id i.e. <button ... id="d_clip_button"><b>Copy To Clipboard...</b></button>.

As a result, your code keeps applying the ZeroClipboard to the first element with that ID on every loop.

DEMO — Here's a rewrite of your code.

Make sure you set the SWF path back to /javascripts/ZeroClipboard.swf in your code.