Jquery sortable over buttons

Question

I have a bunch of buttons that I want to make sortable (eg, I can rearrange them at will). Here's an the example html code. These buttons are dynamically added so the sort needs to work after addition and deletion of buttons. I've tried using the JQuery sortable but with no luck. Any suggestions on how to do it?

    <div id="fav" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
        <div id="MSFT" symbol="MSFT" exchange="NASDAQ" class="stockButton">
            MSFT
            <span symbol="MSFT" exchange="NASDAQ" class="remove-button">
                x
            </span>
        </div>

        <div id="GOOG" symbol="GOOG" exchange="NASDAQ" class="stockButton">
            GOOG
            <span symbol="GOOG" exchange="NASDAQ" class="remove-button">
                x
            </span>
        </div>

        <div id="YHOO" symbol="YHOO" exchange="NASDAQ" class="stockButton">
            YHOO
            <span symbol="YHOO" exchange="NASDAQ" class="remove-button">
                x
            </span>
        </div>

Answer 1

After adding the appropriate libraries try:

$(function() {
$( "#fav" ).sortable();

$( "#fav" ).append('<span symbol="NEW" exchange="ECH" class="remove-button">x</span>');

});

See this http://jsfiddle.net/x4sny/