JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div class="ListCountries">
  <div class="item">Argentina</div>
  <div class="item">Bolivia</div>
  <div class="item">Brasil</div>
  <div class="item">Chile</div>
  <div class="item">Colombia</div>
  <div class="item">Ecuador</div>
  <div class="item">Paraguay</div>
  <div class="item">Peru</div>
  <div class="item">Uruguay</div>
  <div class="item">Venezuela</div>
</div>

<div class="ListCountries other">
  <div class="item">Canada</div>
  <div class="item">United States</div>
  <div class="item">Mexico</div>
  <div class="item">Cuba</div>
  <div class="item">Nicaragua</div>
</div>

CSS

.item{
  width: 200;
  height: 60px;
  background-color: #FFEEAA;
  border: 2px dotted Orange;
  border-radius: 7px;
  padding: 7px;
  margin-bottom: 7px;
}
.other .item {
  background-color: DeepSkyBlue;
  border: 2px dotted SteelBlue;
}

JavaScript

$(".item").append("<p><button class='down'>down↓</button><button class='up'>up↑</button><button class='first'>Move First</button><button class='last'>Move last</button></p>");

$(document).on("click",".up",function() {
	var ob = $(this).closest('.item');
	ob.insertBefore(ob.prev());
});

$(document).on("click",".down",function() {
	var ob = $(this).closest('.item');
	ob.insertAfter(ob.next());
});

$(document).on("click",".first",function() {
	var ob = $(this).closest('.item');
  ob.insertBefore($(this).closest('.ListCountries').find('.item').first());
});

$(document).on("click",".last",function() {
	var ob = $(this).closest('.item');
	ob.insertAfter($(this).closest('.ListCountries').find('.item').last());
});