JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<table id="goods-list" class="table text-center">
  <colgroup>
    <col width=10% />
    <col width=auto />
    <col width=10% />
  </colgroup>
  <thead>
    <tr>
      <th class="text-center">no</th>
      <th class="text-center">title</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td id="num">1</td>
      <td class="text-left">aaa</td>
      <td><button type="button" class="btn btn-success button" data-role="changeNum" data-id="1">순서변경</button></td>
    </tr>
    <tr data-id="2">
      <td id="num">2</td>
      <td class="text-left">bbb</td>
      <td><button type="button" class="btn btn-success button" data-role="changeNum" data-id="2">순서변경</button></td>
    </tr>
    <tr data-id="3">
      <td id="num">3</td>
      <td class="text-left">ccc</td>
      <td><button type="button" class="btn btn-success button" data-role="changeNum" data-id="3">순서변경</button></td>
    </tr>
  </tbody>
</table>
<div class='ordering-layer'>
  <span class='ordering-sub-layer'>
    <button data-role="top" type="button" class="btn btn-warning button">최상단</button>
    <button data-role="bottom" type="button" class="btn btn-warning button">최하단</button>
    <button data-role="up" type="button" class="btn btn-primary button"><i class="glyphicon glyphicon-arrow-up"></i></button>
    <button data-role="down" type="button" class="btn btn-primary button"><i class="glyphicon glyphicon-arrow-down"></i></button>
    <button data-role="order_submit" type="button" class="btn btn-success button disabled">저장</button>
    <button data-role="order_reset" type="button" class="btn btn-danger button">취소</button>
  </span>
</div>

CSS

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
body {
  font-size: 2vw;
}
td {
  vertical-align: middle!important;
}
.ordering-layer {
  z-index:2; 
  width:100%; 
  height:auto; 
  bottom:0; 
  position:fixed; 
  left:50%; 
  margin-left:-50%; 
  background-color:#fff; 
  padding-top:2%; 
  padding-bottom:2%; 
  display: none;
}
.ordering-sub-layer {
  position: relative; 
  margin-left: 2%;
}
.button {
  width:15.7vw; 
  height:3.6em;
}

JavaScript

var default_idx = $('tr').closest('[data-id]'); // 순서 초기화

$(document).on('click', '[data-role=changeNum]', function(){ // 순서변경 버튼
  var item = $(this).closest('[data-id]');
  $('tbody tr').css('background', '#fff');
  $('tbody tr').find('[data-role=changeNum]').addClass('disabled');
  $('tr[data-id='+item.attr('data-id')+']').css('background', '#ffdada');
  $('[data-role=top]').attr('data-id',item.attr('data-id'));
  $('[data-role=bottom]').attr('data-id',item.attr('data-id'));
  $('[data-role=up]').attr('data-id',item.attr('data-id'));
  $('[data-role=down]').attr('data-id',item.attr('data-id'));
  $('[data-role=order_submit]').attr('data-id',item.attr('data-id'));
  $('[data-role=order_reset]').attr('data-id',item.attr('data-id'));
  $('.ordering-layer').fadeIn("fast", function(){
    $('.ordering-layer').css('display', 'block');
  });
});

$(document).on('click', '[data-role=up]', function(){ // 선택인자 위로
  var item = $(this).closest('[data-id]');
  var element = $('tr[data-id='+item.attr('data-id')+']');
  moveRowUp(element); 
  var position = element.offset();
  $('html,body').animate({ scrollTop : position.top - 100}, 0);
});

$(document).on('click', '[data-role=down]', function(){ // 선택인자 아래로
  var item = $(this).closest('[data-id]');
  var element = $('tr[data-id='+item.attr('data-id')+']');
  moveRowDown(element);
  var position = element.offset();
  $('html,body').animate({ scrollTop : position.top - 100}, 0);
});

$(document).on('click', '[data-role=top]', function(){ // 최상단 이동
  var item = $(this).closest('[data-id]');
  var list = $('tr[data-id='+item.attr('data-id')+']').insertBefore($('tr[data-id]').eq(0));
  var position = list.offset();
  $('html,body').animate({ scrollTop : position.top - 100}, 0);
});

$(document).on('click', '[data-role=bottom]', function(){ // 최하단 이동
  var item = $(this).closest('[data-id]');
  var element = $('tr[data-id]');
  var list = $('tr[data-id='+item.attr('data-id')+']').insertAfter($('tr[data-id]').eq(element.length...