JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

Hardware
<ul>
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
    <li>Product 4</li>
    <li>Product 5</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>

CSS

ul {
    padding: 5px;
    margin-left: 20px;
}

li {
    padding: 10px;
    margin-left: 40px;    
}

JavaScript

var $moveProduct = $("li").eq(4); // product5

$("#up").click(function() {
    $moveProduct.prev().before($moveProduct);
});

$("#down").click(function() {
    $moveProduct.next().after($moveProduct);
});