JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>1.4</li>
<li>1.5</li>
<code></code>
</div>
<div>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<li>2.5</li>
<code></code>
</div>
CSS
li {display:none;}
code {cursor:pointer;}
JavaScript
$('div').each(function() {
var data = [];
$('li',this).each(function(){
data.push($(this).text());
});
var data_length = data.length;
$(this).children("code").html(data+"");
$("code").click(function() {
data.move(data_length,0);
$(this).html(data+"");
});
});
Array.prototype.move = function (old_index, new_index) {
if (new_index >= this.length) {
var k = new_index - this.length;
while ((k--) + 1) {
this.push(undefined);
}
}
this.splice(new_index, 0, this.splice(old_index, 1)[0]);
return this; // for testing purposes
};