How to add multiple input fields to jQuery Taggd plugin?

I am using the jQuery Taggd Plugin

Please see also Taggd Project page / examples

I am using the plugin with edit: true. You can tag something in a image and add a text note to it, but i would like to be able to add a Title and a Description for a tag. I've been trying to modif the plugin for some time now, but nothing seems to do what i want.

I want both the input fields to keep the values when you toggle the tag.

I hope someone can shine a light or get me going in the right direction?

/*!
 * jQuery Taggd
 * A helpful plugin that helps you adding 'tags' on images.
 *
 * License: MIT
 */

(function($) {
'use strict';

var defaults = {
    edit: false,

    align: {
        x: 'center',
        y: 'center'
    },

    handlers: {},

    offset: {
        left: 0,
        top: 0
    },

    strings: {
        save: '✓',
        delete: '×'
    }
};

var methods = {
    show: function() {
        var $this = $(this),
            $label = $this.next();

        $this.addClass('active');
        $label.addClass('show').find('input').focus();
    },

    hide: function() {
        var $this = $(this);

        $this.removeClass('active');
        $this.next().removeClass('show');
    },

    toggle: function() {
        var $hover = $(this).next();

        if($hover.hasClass('show')) {
            methods.hide.call(this);
        } else {
            methods.show.call(this);
        }
    }
};


/****************************************************************
 * TAGGD
 ****************************************************************/

var Taggd = function(element, options, data) {
    var _this = this;

    if(options.edit) {
        options.handlers = {
            click: function() {
                _this.hide();
                methods.show.call(this);
            }
        };
    }

    this.element = $(element);
    this.options = $.extend(true, {}, defaults, options);
    this.data = data;
    this.initialized = false;

    if(!this.element.height() || !this.element.width()) {
        this.element.on('load', _this.initialize.bind(this));
    } else this.initialize();
};


/****************************************************************
 * INITIALISATION
 ****************************************************************/

Taggd.prototype.initialize = function() {
    var _this = this;

    this.initialized = true;

    this.initWrapper();
    this.addDOM();

    if(this.options.edit) {
        this.element.on('click', function(e) {
            var poffset = $(this).parent().offset(),
                x = (e.pageX - poffset.left) / _this.element.width(),
                y = (e.pageY - poffset.top) / _this.element.height();

            _this.addData({
                x: x,
                y: y,
                text: ''
            });

            _this.show(_this.data.length - 1);
        });
    }

    $(window).resize(function() {
        _this.updateDOM();
    });
};

Taggd.prototype.initWrapper = function() {
    var wrapper = $('<div class="taggd-wrapper" />');
    this.element.wrap(wrapper);

    this.wrapper = this.element.parent('.taggd-wrapper');
};

Taggd.prototype.alterDOM = function() {
    var _this = this;

    this.wrapper.find('.taggd-item-hover').each(function() {
        var $e = $(this),

            $input = $('<input type="text" size="16" />')
                .val($e.text()),
            $button_ok = $('<button />')
                .html(_this.options.strings.save),
            $button_delete = $('<button />')
                .html(_this.options.strings.delete);

        $button_ok.on('click', function() {
            _this.hide();
        });

        $button_delete.on('click', function() {
            var x = $e.attr('data-x'),
                y = $e.attr('data-y');

            _this.data = $.grep(_this.data, function(v) {
                return v.x != x || v.y != y;
            });

            _this.addDOM();
            _this.element.triggerHandler('change');
        });

        $input.on('change', function() {
            var x = $e.attr('data-x'),
                y = $e.attr('data-y'),
                item = $.grep(_this.data, function(v) {
                    return v.x == x && v.y == y;
                }).pop();

            if(item) item.text = $input.val();

            _this.addDOM();
            _this.element.triggerHandler('change');
        });

        $e.empty().append($input, $button_ok, $button_delete);
    });

    _this.updateDOM();
};

/****************************************************************
 * DATA MANAGEMENT
 ****************************************************************/

Taggd.prototype.addData = function(data) {
    if($.isArray(data)) {
        this.data = $.merge(this.data, data);
    } else {
        this.data.push(data);
    }

    if(this.initialized) {
        this.addDOM();
        this.element.triggerHandler('change');
    }
};

Taggd.prototype.setData = function(data) {
    this.data = data;

    if(this.initialized) {
        this.addDOM();
    }
};

Taggd.prototype.clear = function() {
    if(!this.initialized) return;
    this.wrapper.find('.taggd-item, .taggd-item-hover').remove();
};


/****************************************************************
 * EVENTS
 ****************************************************************/

Taggd.prototype.on = function(event, handler) {
    if(
        typeof event !== 'string' ||
        typeof handler !== 'function'
    ) return;

    this.element.on(event, handler);
};


/****************************************************************
 * TAGS MANAGEMENT
 ****************************************************************/

Taggd.prototype.iterateTags = function(a, yep) {
    var func;

    if($.isNumeric(a)) {
        func = function(i, e) { return a === i; };
    } else if(typeof a === 'string') {
        func = function(i, e) { return $(e).is(a); }
    } else if($.isArray(a)) {
        func = function(i, e) {
            var $e = $(e);
            var result = false;

            $.each(a, function(ai, ae) {
                if(
                    i === ai ||
                    e === ae ||
                    $e.is(ae)
                ) {
                    result = true;
                    return false;
                }
            });

            return result;
        }
    } else if(typeof a === 'object') {
        func = function(i, e) {
            var $e = $(e);
            return $e.is(a);
        };
    } else if($.isFunction(a)) {
        func = a;
    } else if(!a) {
        func = function() { return true; }
    } else return this;

    this.wrapper.find('.taggd-item').each(function(i, e) {
        if(typeof yep === 'function' && func.call(this, i, e)) {
            yep.call(this, i, e);
        }
    });

    return this;
};

Taggd.prototype.show = function(a) {
    return this.iterateTags(a, methods.show);
};

Taggd.prototype.hide = function(a) {
    return this.iterateTags(a, methods.hide);
};

Taggd.prototype.toggle = function(a) {
    return this.iterateTags(a, methods.toggle);
};

/****************************************************************
 * CLEANING UP
 ****************************************************************/

Taggd.prototype.dispose = function() {
    this.clear();
    this.element.unwrap(this.wrapper);
};


/****************************************************************
 * SEMI-PRIVATE
 ****************************************************************/

Taggd.prototype.addDOM = function() {
    var _this = this;

    this.clear();
    this.element.css({ height: 'auto', width: 'auto' });

    var height = this.element.height();
    var width = this.element.width();

    $.each(this.data, function(i, v) {
        var $item = $('<span />');
        var $hover;

        if(
            v.x > 1 && v.x % 1 === 0 &&
            v.y > 1 && v.y % 1 === 0
        ) {
            v.x = v.x / width;
            v.y = v.y / height;
        }

        if(typeof v.attributes === 'object') {
            $item.attr(v.attributes);
        }

        $item.attr({
            'data-x': v.x,
            'data-y': v.y
        });

        $item.css('position', 'absolute');
        $item.addClass('taggd-item');

        _this.wrapper.append($item);

        if(typeof v.text === 'string' && (v.text.length > 0 || _this.options.edit)) {
            $hover = $('<span class="taggd-item-hover" style="position: absolute;" />').html(v.text);

            $hover.attr({
                'data-x': v.x,
                'data-y': v.y
            });

            _this.wrapper.append($hover);
        }

        if(typeof _this.options.handlers === 'object') {
            $.each(_this.options.handlers, function(event, func) {
                var handler;

                if(typeof func === 'string' && methods[func]) {
                    handler = methods[func];
                } else if(typeof func === 'function') {
                    handler = func;
                }

                $item.on(event, function(e) {
                    if(!handler) return;
                    handler.call($item, e, _this.data[i]);
                });
            });
        }
    });

    this.element.removeAttr('style');

    if(this.options.edit) {
        this.alterDOM();
    }

    this.updateDOM();
};

Taggd.prototype.updateDOM = function() {
    var _this = this;

    this.wrapper.removeAttr('style').css({
        height: this.element.height(),
        width: this.element.width()
    });

    this.wrapper.find('span').each(function(i, e) {
        var $el = $(e);

        var left = $el.attr('data-x') * _this.element.width();
        var top = $el.attr('data-y') * _this.element.height();

        if($el.hasClass('taggd-item')) {
            $el.css({
                left: left - $el.outerWidth(true) / 2,
                top: top - $el.outerHeight(true) / 2
            });
        } else if($el.hasClass('taggd-item-hover')) {
            if(_this.options.align.x === 'center') {
                left -= $el.outerWidth(true) / 2;
            } else if(_this.options.align.x === 'right') {
                left -= $el.outerWidth(true);
            }

            if(_this.options.align.y === 'center') {
                top -= $el.outerHeight(true) / 2;
            } else if(_this.options.align.y === 'bottom') {
                top -= $el.outerHeight(true);
            }

            $el.attr('data-align', $el.outerWidth(true));

            $el.css({
                left: left + _this.options.offset.left,
                top: top + _this.options.offset.top
            });
        }
    });
};


/****************************************************************
 * JQUERY LINK
 ****************************************************************/

$.fn.taggd = function(options, data) {
    return new Taggd(this, options, data);
};
})(jQuery);

What do i have to add to the code above to get this working?

Thank you very much!!!