How to isolate functionalities between multiple jQuery Plugins in Same Page
<p>If I have more than 1 instance of the same plugin on the same page how can I separate functionality. eg. in this demo <a href="http://jsfiddle.net/3jwAK/" rel="nofollow">http://jsfiddle.net/3jwAK/</a>, I have a plugin "<code>editor</code>" that appends a link simulating some plugin/widget button, that when clicked will append a line to the <code>textarea</code>. </p>

<p>The problem with it currently is it only targets the last <code>textarea</code></p>

<p>Code looks like </p>

<p><strong>JS</strong></p>

<pre><code>(function($) {
    $.fn.editor = function(options) {
        var helpers = {
            rand: function() {
                return Math.round(Math.random() * 20);
            }   
        };

        return this.each(function() {
            $this = $(this);

            var div = $("&lt;a&gt;", {
                text: "Add Random Number",
                href: "#",
                click: function() {
                    $this.val( $this.val() + "\n" + helpers.rand() );
                }
            });

            $this.before(div);
        });

    }
})(jQuery);
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;textarea name="txtArea1" cols="50" rows="6" id="editor1"&gt;&lt;/textarea&gt;
</code></pre>

<p><br />
</p>
