JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<ul class="products mnm_child_products grid columns-3">
  <li class="product first">product 1</li>
  <li class="product">product 2</li>
  <li class="product last">product 3</li>
  <li class="product first">product 4</li>
</ul>

<div>

  <button value="2">2</button>
  <button value="3">3</button>
  <button value="4">4</button>
</div>

CSS

.grid {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  padding: 0em;
  background: yellow;
  margin-right: 2%;
  list-style: none;
  margin-bottom: 1em;

}

.columns-2 li {
  width: 48%;
}

.columns-3 li {
  width: 31%;
}

.columns-4 li {
  width: 23.5%;
}

.first {
  background: lightgray;
  clear: both;
}

.last {
  background: green;
  margin-right: 0;
}

JavaScript

$('button').on('click', function(e) {

  var to = $(this).val();

  console.log(to);

  $(".mnm_child_products.grid").removeClass(function(index, css) {
    return (css.match(/columns-\S+/g) || []).join(" ");
  }).addClass("columns-" + to);

	$(".mnm_child_products.grid > li").removeClass( "first last" );
  $(".mnm_child_products.grid > li:nth-child( " + to + "n+1 )").addClass("first");
  $(".mnm_child_products.grid > li:nth-child( " + to + "n)").addClass("last")

});