The reason you cannot access the `id` variable you created in the `copy` function from `afterCopy` is because variables defined inside of a function are [scoped to that function][scoped]. However, this is easily overcomable.

There is no need to save the value from `$(this).attr('id')` as a global variable when the `copy` function is called, because you can just as easily get the id of the calling element in the `afterCopy` function by using *the same exact expression*:  i.e.



    afterCopy: function () {
        var id = $(this).attr('id');
    }

This answers your original question, but there is a much better way to determine which elements to select.  Rather than relying on the `ID` field to never change and using it to construct the id of another element, you can just store the exact id of your copy text and copy message elements in the form of [**custom data-* attributes**][data-*] on your `.copyme` `anchor`, like this:



    <a data-copy="#code-1" data-copy-msg="#msg1" class="copyme">Copy Source 1</a> 

Then, in the `copy` function, you can grab that attribute and pass it into a jQuery selector to get the text value to copy, like this:



    copy: function () {
        var copySelector = $(this).data('copy');
        return $(copySelector).text();
    }

You can handle the `afterCopy` event the same way.  You can use `this` instead of having to store the ID in memory.  Grab the selector where you want the message to go, and apply the html to that, like this:



    afterCopy: function () {
        var copyMsgSelector = $(this).data('copy-msg');
        $(copyMsgSelector).html("Source Code Copied");
    }

----

[Working Demo in Fiddle][fiddle]
====

-----

So the whole thing would look like this:

**HTML**:



    <a data-copy="#code-1" data-copy-msg="#msg1"
       href="#" class="copyme" >Copy Source 1</a> 
    <div id="code-1" style="display:none;">source code 1</div>
    <span id="msg1"></span>
    
    <br/>
    <a data-copy="#code-2" data-copy-msg="#msg2"
       href="#" class="copyme" >Copy Source 2</a> 
    <div id="code-2" style="display:none;">source code 2</div>
    <span id="msg2"></span>

**JavaScript**:



    $('.copyme').zclip({
        path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
        copy: function () {
            var copySelector = $(this).data('copy');
            return $(copySelector).text();
        },
        afterCopy: function () {
            var copyMsgSelector = $(this).data('copy-msg');
            $(copyMsgSelector).html("Source Code Copied");
        }
    });

[scoped]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope
[data-*]: http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-%2a-attributes
[fiddle]: http://jsfiddle.net/KyleMit/34bN3/

I have multipule "copy code" buttons on one page. Each code has its own button. 


here is my basic html:


    <a id="1" href="#" class="small-white-btn copyme">Copy Source</a>    
    <div id="code-1" style="display:none;">html source code goes here</div>
    <div class="msg1"></div>

    <a id="2" href="#" class="small-white-btn copyme">Copy Source</a>   
    <div id="code-2" style="display:none;">html source code goes here</div>
    <div class="msg2"></div>

My zclip jquery looks like this:

    $('.copyme').zclip({
        path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
        copy: function () {
            var id = $(this).attr('id');
            var copythis = $('#code-' + id).text();
            return copythis;
        },
        afterCopy: function () {
            $("div.msg" + id).html("<p>Source Code Copied</p>");
        }
    });

This works, however, I cannot get the message injected into the div `class="msg"` tag.

How can I target the var id, add it to the div msg and display it on the page when the button is clicked.
