Jquery UI selectable - change dom obeject which fired selected / unselected event

Question

I have a huge set of selectable obejcts.

You can click them and then their id is added to a form, when they are deselected it's removed from the form again.

I had a working version, till i noticed that sometimes if you click too fast the id is added multiple times.

For prohibiting this i added a class to the list item so that it is classified as processing.

My Question:

How do i get a pointer to the DOM Element which was clicked in order to add the class

What works to run over all "selected" but that results in other problems:

$( ".ui-selected", this ).each(function() {
 if($(this).hasClass('processing'))
 return;
 $(this).addClass('processing');
 });

What I have now - to only get the element firing the event... is wrong:

 $(".selectgroup").bind("mousedown", function(e) {
    e.metaKey = true;

   }).selectable( {filter: "li"},
        {
            stop: function(){
                // Add to Form
                $( ".ui-selected", this ).each(function() {
                if($(this).hasClass('processing'))
                return;
                $(this).addClass('processing');

                var itemid = $(this).attr("value");
                var formhtml ='<input type="hidden" name="tags[]" id="id'+itemid+'" value="'+itemid+'">';
                $("#tagform").append(formhtml);
                });
         },
        {
             unselected: function( event, ui ) {

                itemid = "#id" + ui.unselected.value;
                $('').removeClass('processing');
                alert(itemid);
                $(itemid).remove();
             }
        }.................................

For somebody who is fit in jquery this must be very easy to solve.

Answer 1

I solved my own question.

When you now it, it's pretty easy.

See and save yourself some time:

        {
            selected: function(event,ui){
                // Add to Form
                var item = $(ui.selected);

                if(item.hasClass('processing')){
                  alert("return");  
                  return;
                }
                item.addClass('processing');

                var itemid = item.attr("value");
                alert("S ID - " + itemid);
                var formhtml ='<input type="hidden" name="tags[]" id="id'+itemid+'" value="'+itemid+'">';
                $("#tagform").append(formhtml);



            }
        },
        {
             unselected: function( event, ui ) {

                itemid = "#id" + ui.unselected.value;
                $(ui.unselected).removeClass('processing');
                alert(itemid);
                $(itemid).remove();
             }