JSFiddle - React, Tailwind, and code Playground

by liggth

HTML

<script type="text/javascript">
  $(document).ready(function(){

    $(".down").click(function(){
        var pdiv = $(this).parent();
        pdiv.insertAfter(pdiv.next());
        return false
    });
    $(".up").click(function(){
        var pdiv = $(this).parent();
        pdiv.insertBefore(pdiv.prev());
        return false
    });    
  });
  </script>

<div class="box1">График 1 <a class="down" href="#">Вниз</a> | <a class="up" href="#">Вверх</a></div>
<div class="box2">График 2<a class="down" href="#">Вниз</a> | <a class="up" href="#">Вверх</a></div>
<div class="box3">График 3<a class="down" href="#">Вниз</a> | <a class="up" href="#">Вверх</a></div>
<div class="box4">График 4<a class="down" href="#">Вниз</a> | <a class="up" href="#">Вверх</a></div>
<div class="box5">График 5<a class="down" href="#">Вниз</a> | <a class="up" href="#">Вверх</a></div>

CSS

div {
  padding:5px;
  margin-bottom:10px;
}
.box1{
  background:yellow;
}
.box2{
  background:red;
}
.box3{
  background:blue;
}
.box4{
  background:grey;
}
.box5{
  background:green;
}