JSFiddle - React, Tailwind, and code Playground

by Abinash Shaw

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">


</script>

<body>
  <div class="container">
    <div class="box" id="one">
      <p>one</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>
    </div>

    <div class="box" id="two">
      <p>two</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>
    </div>

    <div class="box" id="three">
      <p>three</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>

    </div>

    <div class="box" id="four">
      <p>four</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>
    </div>
  </div>

</body>

CSS

.box {
   height: 25%;
   width: 45%;
   padding: 1%;
   margin-left: 1%;
   margin-top: 1%;
   border: 1px solid black;
   float: left;
 }
 
 .disabled-btn {
   cursor: not-allowed;
   opacity: 0.25%;
 }

JavaScript

$(document).ready(function() {
  resetEvents();

  function handleEvents() {
    $(".top, .left, .down, .right").prop("disabled", false);

    $(".container .box:first-child").find(".top, .left").prop("disabled", true);
    $(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
    $(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
    $(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
  }


  function resetEvents() {

    $(".top, .left, .down, .right").unbind('click');

    handleEvents();
    
    $('.right').click(function() {
      var toMove1 = $(this).parents('.box');

      $(toMove1).insertAfter($(toMove1).next());
      handleEvents();
    });

    $('.left').click(function() {
      var toMove1 = $(this).parents('.box');

      $(toMove1).insertBefore($(toMove1).prev());
      handleEvents();
    });

    $('.down').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).next();
      var toMove2 = $(middle).next();

      toMove2 = $(toMove1).insertAfter($(middle).next());

      var middle = $(toMove2).prev();
      middle = $(middle).insertBefore($(middle).prev());
      handleEvents();
    });

    $('.top').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).prev();
      var toMove2 = $(middle).prev();

      toMove2 = $(toMove1).insertBefore($(middle).prev());

      var middle = $(toMove2).next();
      middle = $(middle).insertAfter($(middle).next());
      handleEvents();
    });
  }
});