JSFiddle - React, Tailwind, and code Playground

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>

CSS

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

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($('.item:eq(0)'));
});

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