JSFiddle - React, Tailwind, and code Playground

by Krzysztof Niecikowski

HTML

<div id="box-container"> 
<div class="box">
		Box 1
		<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="leg">
		Box 1
		<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="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>http://jsfiddle.net/#save
</div>
</div>

CSS

.leg {
border:1px solid #333; 
    margin-bottom:10px;
    background-color:#eee
}

JavaScript

$(".down").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertAfter($parent.next()); 
});

$(".up").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertBefore($parent.prev()); 
});