JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<button id="white">Move White</button><button id="blue">Move Blue</button><button id="red">Move Red</button>
<ul>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
</ul>

CSS

li {
    padding: 10px;
    list-style: none;
}

.white {
    background-color: lightgray;
}

.blue {
    background-color: lightblue;
}

.red {
    background-color: pink;
}

JavaScript

$('button').click(function(e) {
    var color = $(this).prop('id');
    var $lis = $('li.' + color);
    $lis.remove();
    for (var i = 0; i < $lis.length; i++) {
        $('ul').prepend('<li class="' + color + '">' + color + '</li>');
    }        
});