Hi guys,

I am making a jquery tagging plugin.

I have an issue that,

When there is multiple instances of the plugin on the page, if you click on any <ul> that the plugin has been called on it will put focus on the <input /> in the last <ul> that the plugin has been called on.

Why is this any how can I fix it.

$.widget("ui.tagit", {

    // default options
    options: {
        tagSource:   [],
        triggerKeys:        ['enter', 'space', 'comma', 'tab'],
        initialTags: [],
        minLength:   1
    },

    //private variables
    _vars: {
        lastKey: null,
        element: null,
        input:   null,
        tags:    []
    },

    _keys: {
        backspace: 8,
        enter:     13,
        space:     32,
        comma:     44,
        tab:       9
    },

    //initialization function
    _create: function() {

        var instance = this;

        //store reference to the ul
        this._vars.element = this.element;

        //add class "tagit" for theming
        this._vars.element.addClass("tagit");

        //add any initial tags added through html to the array
        this._vars.element.children('li').each(function() {
            instance.options.initialTags.push($(this).text());
        });

        //add the html input
        this._vars.element.html('<li class="tagit-new"><input class="tagit-input" type="text" /></li>');

        this._vars.input = this._vars.element.find(".tagit-input");

        //setup click handler
        $(this._vars.element).click(function(e) {
            if (e.target.tagName == 'A') {
                // Removes a tag when the little 'x' is clicked.
                $(e.target).parent().remove();
                instance._popTag();
            }
            else {
                instance._vars.input.focus();
            }
        });

        //setup autcomplete handler
        this.options.appendTo = this._vars.element;
        this.options.source = this.options.tagSource;
        this.options.select = function(event, ui) {
            instance._addTag(ui.item.value);
            return false;
        }
        this._vars.input.autocomplete(this.options);

        //setup keydown handler
        this._vars.input.keydown(function(e) {
            var lastLi = instance._vars.element.children(".tagit-choice:last");
            if (e.which == instance._keys.backspace)
                return instance._backspace(lastLi);

            if (instance._isInitKey(e.which)) {
                event.preventDefault();
                if ($(this).val().length >= instance.options.minLength)
                    instance._addTag($(this).val());
            }

            if (lastLi.hasClass('selected'))
                lastLi.removeClass('selected');

            instance._vars.lastKey = e.which;
        });

        //setup blur handler
        this._vars.input.blur(function() {
            instance._addTag($(this).val());
            $(this).val('');
        });

        //define missing trim function for strings
        String.prototype.trim = function() {
            return this.replace(/^\s+|\s+$/g, "");
        };

        this._initialTags();

    },
    _popTag: function() {
        return this._vars.tags.pop();
    }
    ,

    _addTag: function(value) {
        this._vars.input.val("");
        value = value.replace(/,+$/, "");
        value = value.trim();
        if (value == "" || this._exists(value))
            return false;

        var tag = "";
        tag = '<li class="tagit-choice">' + value + '<a class="tagit-close">x</a></li>';
        $(tag).insertBefore(this._vars.input.parent());
        this._vars.input.val("");
        this._vars.tags.push(value);
    }
    ,

    _exists: function(value) {
        if (this._vars.tags.length == 0 || $.inArray(value, this._vars.tags) == -1)
            return false;
        return true;
    }
    ,

    _isInitKey : function(keyCode) {
        var keyName = "";
        for (var key in this._keys)
            if (this._keys[key] == keyCode)
                keyName = key

        if ($.inArray(keyName, this.options.triggerKeys) != -1)
            return true;
        return false;
    }
    ,

    _backspace: function(li) {
        if (this._vars.input.val() == "") {
            // When backspace is pressed, the last tag is deleted.
            if (this._vars.lastKey == this._keys.backspace) {
                this._popTag();
                li.remove();
                this._vars.lastKey = null;
            } else {
                li.addClass('selected');
                this._vars.lastKey = this._keys.backspace;
            }
        }
        return true;
    }
    ,

    _initialTags: function() {
        if (this.options.initialTags.length != 0) {
            for (var i in this.options.initialTags)
                if (!this._exists(this.options.initialTags[i]))
                    this._addTag(this.options.initialTags[i]);
        }
    }
    ,

    tags: function() {
        return this._vars.tags;
    }
    ,

    destroy: function() {
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
        this._vars['tags'] = [];
    }
})
        ;