Move containing elements up and down with jquery

Question

Thanks for any help you can provide! Currently, I use a ui-sortable code to allow users to move items up and down in order. Now, I want to give each of these items a set of "up" and "down" buttons that allow users to move items up and down with a click. I've tried reworking theses posts, but I seem to be missing something obvious...

jQuery Sortable Move UP/DOWN Button move up/down in jquery

I think somehow I'm not applying the jquery to the right element. My jsfiddle is here: http://jsfiddle.net/kevindp78/vexw5/2/ and code is below.

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')
});

Answer 1

There are several problems to address in your code so let's go through them in order.

First there is $('up-button') it is missing the . so it won't select the buttons.

Next you are using the parent() method which only goes up one level, use parents('.leg') instead.

insertBefore() is a method that accepts a target as to where to place the content you selected.

previous() isn't a function, it is prev() instead and it doesn't need a parameter as it just selects the previous element.

If you combine all of those fixes you would get something like this

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

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

As demonstrated on this edited fiddle http://jsfiddle.net/vexw5/6/