div 1
div 2
div 3
div 4
<style>
.container {
width: 500px;
margin: 0 auto;
}
.container > div {
display: flex;
margin: 3px;
padding: 5px;
border-bottom: 1px solid #ccc;
border-radius: 10px;
align-items: space-between;
justify-content: space-between;
}
.container > div > span {
font-weight: bold;
font-size: 18px;
width: 80%;
}
</style>
<div class="container">
<div class="div1">
<span>div 1</span><button class="btn-up">Up</button
><button class="btn-down">Dn</button>
</div>
<div class="div2">
<span>div 2</span><button class="btn-up">Up</button
><button class="btn-down">Dn</button>
</div>
<div class="div3">
<span>div 3</span><button class="btn-up">Up</button
><button class="btn-down">Dn</button>
</div>
<div class="div4">
<span>div 4</span><button class="btn-up">Up</button
><button class="btn-down">Dn</button>
</div>
</div>
<script>
$(document).ready(function () {
$(".btn-down").on("click", function () {
let pparent = $(this).parent();
pparent.next().insertBefore(pparent);
});
$(".btn-up").on("click", function () {
let pparent = $(this).parent();
pparent.prev().insertAfter(pparent);
});
});
</script>