For some reason, the handler on "#groupA li" works for lis in groupB

yui_exercise_1.html

<div id="exercise" class="yui3-g">
        <div class="yui3-u-1-2">
            <h3>Group A</h3>
            <ul id="groupA">
                <li>Steven Tyler</li>
                <li>Joe Perry</li>
                <li>Brad Whitford</li>
                <li>Tom Hamilton</li>
            </ul>
        </div>

        <div class="yui3-u-1-2">
            <h3>Group B</h3>
            <ul id="groupB">
            </ul>
        </div>
</div>

    <script src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
    <script>
    Y.one("#groupA li").remove();
    Y.one("#groupA").appendChild(Y.Node.create("<li><em>Andrew</em> Burgess</li>"));

    Y.all("#groupA > li").on("click", function (e) {
        console.log("groupA");
        Y.one("#groupB").append(e.target);
    });

    Y.all("#groupB > li").on("click", function (e) {
        console.log("groupB");
        Y.one("#groupA").append(e.target);
    });
    </script>