JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="white">
<input type="button" value="blue">
<input type="button" value="red">

<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

.white {
    color: #DDD;
}
.blue {
    color: #33F;
}
.red {
    color: #F33;
}
.green {
    color: #6C6;
}

JavaScript

$('input').click( function(e) {
    var c = $(e.target).val();
    $('ul').find('.'+c).each( function( index, element ) {
        console.log(element);
        $('ul').prepend(element);
    });
});