Przesuwaj elementy w górę iw dół za pomocą jquery

Dziękujemy za pomoc, jaką możesz zapewnić! Obecnie używam kodu sortowalnego przez użytkownika, aby umożliwić użytkownikom przenoszenie elementów w górę iw dół w kolejności. Teraz chcę dać każdemu z tych elementów zestaw przycisków „w górę” i „w dół”, które pozwalają użytkownikom przesuwać przedmioty w górę iw dół jednym kliknięciem. Próbowałem przerobić posty tez, ale wydaje mi się, że brakuje mi czegoś oczywistego ...

jQuery Sortable Przesuń przycisk UP / DOWN przesuń w górę / w dół w jquery

Myślę, że nie stosuję jquery do właściwego elementu. Moje jsfiddle jest tutaj:http://jsfiddle.net/kevindp78/vexw5/2/ i kod jest poniżej.

HTML

<div id="box" class="ui-sortable" style="display: block;"> 
<div class="leg">
    <a class="image">IMG1</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff1
    </div>
</div>
<div class="leg">
    <a class="image">IMG2</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff2
    </div>
</div>
<div class="leg">
    <a class="image">IMG3</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff3
    </div>

</div>

JS

$('up-button').click(function(){
$(this).parent('.leg').insertBefore.previous('.leg')
});

$('.down-button').click(function(){
$(this).parent('.leg').insertAfter.next('.leg')
});

questionAnswers(2)

yourAnswerToTheQuestion