change list order by buttons

by akalankaimesh

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="sort_list_wrap">
  <div>
    <div>1</div>
  </div>
  <div>
    <div>2</div>
  </div>
  <div>
    <div>3</div>
  </div>
  <div>
    <div>4</div>
  </div>
</div>

CSS

#sort_list_wrap>*:first-child .up_btn{
  display: none;
}

#sort_list_wrap>*:last-child .down_btn{
  display: none;
}

JavaScript

$.fn.sort_list_wrap = function() {
  var currentEle = $(this);

  function setButtons() {
    //var firstItem = currentEle.eq(0);
    //var lastItem = currentEle.eq(currentEle.length-1);
    var appendArrBtns = '<button type="button" class="up_btn"><i class="fas fa-chevron-up"></i></button><button type="button" class="down_btn"><i class="fas fa-chevron-down"></i></button>'
    currentEle.children().append(appendArrBtns);

  }

  function changeUpDown(currentIndex, changeIndex) {
  
  var upEle = currentEle.children().eq(currentIndex);
  var downEle = currentEle.children().eq(currentIndex+(changeIndex));
		var goToUp = downEle.html();
    var goToDown = upEle.html();
    
    //empty elements
    upEle.empty();
    downEle.empty();
    
    //change order
    upEle.html(goToUp);
    downEle.html(goToDown);
    
  }
  

  $(document).on("click", ".up_btn", function() {
    var getItemIndex = $(this).closest("div").index();
    changeUpDown(getItemIndex, -1);
    
  });
  $(document).on("click", ".down_btn", function() {
    var getItemIndex = $(this).closest("div").index();
    changeUpDown(getItemIndex, +1);
  });
  setButtons();
}

$("#sort_list_wrap").sort_list_wrap();