JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divid">
  <p id="p1">one</p>
  <p id="p2">two</p>
  <p id="p3">three</p>
  <p id="p4">four</p>
</div>

CSS

p {
  background-color: skyblue;
  text-align: center;
  color: white;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

JavaScript

var getList = (selector) => [].slice.call(document.querySelectorAll(selector));

var paragraphs = getList("#divid p[id ^= 'p']");
paragraphs.forEach((paragraph, index) => {
  paragraph.addEventListener('click', (e) => {
    for (let i = 0; i < index; i++) {
      paragraphs[i].classList.remove('active');
    }
    for (let i = index; i < paragraphs.length; i++) {
      paragraphs[i].classList.add('active');
    }
  });
})