Re-using a function jquery?

Question

I Have this function, I would like to use the same function for 3 other sections on the same page.

I have tried putting "this" and closest but it doesn't work correctly. Any thoughts?

I have a UL with a class of "contain" I have also wrapped each section into it's own div of "subSet" so it becomes the "parent".

//Sign Up Favorites Function For Clicking
   $('.popular-list li a').live("click",function() //this will apply to all anchor tags
        { 
                var stuff = $(this).text();
                        var hasDuplicate = false;

      $('ul.contain li').each( function(){
       if ($(this).text() === stuff ){
          hasDuplicate = true;
          return false;
       }
    });

    if (hasDuplicate ) {
    $("#error").queue(function () {
        $(this).fadeIn(500);
        $(this).html('You Have Already Added '+stuff);
        $(this).animate({opacity: 1.0}, 2000)
        $(this).fadeOut(1500);
        $(this).dequeue();
      });





        } 
    else {         
       $('ul.contain').append('<li title="Delete '+ stuff + '">'+stuff+'</li>'); 
       }
    });

      //Sign Up Favorites Function For Adding Custom   
      $('a.addnew').live("click",function() //this will apply to all anchor tags
        { 
                     var newstuff = $("#create-new-drink").val();
                        var hasDuplicate = false;

      $('ul.contain li').each( function(){
       if ($(this).text() === newstuff ){
          hasDuplicate = true;
          return false;
       }
    });

    if (hasDuplicate ) {
        $("#error").queue(function () {
        $(this).fadeIn(500);
        $(this).html('You Have Already Added '+newstuff);
        $(this).animate({opacity: 1.0}, 2000)
        $(this).fadeOut(1500);
        $(this).dequeue();
      });
     } 
           else if(newstuff === '') {  $("#error").queue(function () {
            $(this).fadeIn(500);
            $(this).html('The Box is Empty');
            $(this).animate({opacity: 1.0}, 2000)
            $(this).fadeOut(1500);
            $(this).dequeue();
          });
     }
        else {         
           $('ul.contain').append('<li title="Delete '+ newstuff + '">'+newstuff+'</li>'); 
        }
    });




    //Remove an Item
    $("ul.contain li").live('click', function(ev) {
        ev.preventDefault();
        $(this).fadeOut(500, function(ev) { 
            $(this).remove(); 
        });
    });

This is the HTML to match:

<div class="subStep">
    <h3>Section Headline</h3>

    <ul class="contain">
    <span id="error" class="notice"></span>
    </ul>




    <ul class="popular-list">
    <h4>Headline</h4>
    <li><a href="javascript:;">Dummy Text</a></li>

    </ul>
    <p class="create-entry">Add Your Own: <input type="text" name="createnew" value="" id="create-new" title="" /><a href="javascript:;" class="addnew button">Add New</a></p>
    </div>

Answer 1

You may be able to wrap the whole function as a generic function and pass in a parameter.

For instance:

function DoStuff(selector) { //do stuff }

$(".yourClass").click(function(){
     DoStuff(this);
});

Answer 2

Keep in mind you can use "," in your selector to attach a handler to multiple types of elements, for example:

$("a, div.heading, p").click(function() {
    // this click event will fire for all anchors,
    // paragraphs and divs with the class "heading"
});

Answer 3

You can make your own function (function DoSomething() {/code/}) and include it, for example:

$("#something").click(DoSomething);

If you need to have some change (I see that the text changes) you can do this:

function DoSomething() {
   $("#div").html(text);
   /* do something else */
}

var text = 'Hey I am a text!';
$("#something").click(DoSomething);