[jQuery] Help using click event on looped LIs for two functions with stopPropagation and .live

[seamusjr]

Hello,

I am having some difficulty using the click event between two
functions.  Either it bubbles like crazy or it only works for one
function then stopPropagation kills it altogther for the other.  Using
jquery 1.3.2 for this and .live.  Please if you have suggestions let
me know.

Working on a script where there are two unordered lists,
#school_choices and #selected_schools.  When the user clicks on a LI
from the #school_choices an LI is appended with the same text and id
to #selected_schools, the clicked LI from  #school_choices  is then
set to display:none.  The #selected_schools UL that starts out with no
child nodes, once it get populated and user can click on it, the
clicked #selected_schools LI gets removed and the  #school_choices LI
that corresponds to it (same LI id and text) is set back to display
block.

Regards,
Seamus

JS:

$(function(){
        function addSchool(){
                var choice_id = $(this).attr('id');
                var choice_value = $(this).text();

                $("ul#schools_selected").append("<li id='"+choice_id
+"'>"+choice_value+"</li>");
                $(this).addClass("schoolHide").removeClass("schoolShow");
        //      event.stopPropagation();
        }

        function removeSchool(){
                var selected_id = $(this).attr('id');
                var selected_value = $(this).text();


                $("ul#school_choices li").attr("id", selected_id).removeClass
("schoolHide").addClass("schoolShow");
                $(this).addClass("schoolHide").removeClass("schoolShow");
        }

        $("ul#school_choices li").live("click", addSchool);
        $("ul#schools_selected li").live("click", removeSchool);
});

CSS:

.schoolShow { display: block; }
.schoolHide { display:none; }

HTML:
<ul id="schools_selected">
</ul>

        <ul id="school_choices">
                <li id="choice_0">Choice a</li>
                <li id="choice_1">Choice b</li>
                <li id="choice_2">Choice c</li>
        </ul>