JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
      <h3>Web Design</h3>
      <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
      <h3>E-commerce</h3>
      <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
      <h3>SEO</h3>
      <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

CSS

#points-of-sale ul li {
  display: none;
}

.active {
  display: block !important;
}

JavaScript

var buttons = $(".buttons button");

buttons.on('click', function(e) {
  var idx = buttons.index(e.target)
  if (idx === 3) { //All button
    $("#points-of-sale ul li").addClass("active");
  } else {
    $("#points-of-sale ul li").removeClass("active");
    $("#points-of-sale ul li:eq(" + idx + ")").addClass("active");
  }
});

/* 
function show(index) {
  if (typeof(index) === 'undefined') {
    $("#points-of-sale ul li").addClass("active");
  } else {

    $("#points-of-sale ul li").removeClass("active");
    $("#points-of-sale ul li:nth-child(" + index + ")").addClass("active");
  }
}

WebButton[0].onclick = function() {
  show(1);
}

EButton[0].onclick = function() {
  show(2);
}

SEOButton[0].onclick = function() {
  show(3);
}

AllButton[0].onclick = function() {
  show();
}

show(1)
 */