JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="filter">
  <div class="filters">
    <button>all</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div class="items">
    <p>Item 1</p>
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 3</p>
    <p>Item 3</p>
  </div>
</div>

<div class="filter">
  <div class="filters">
    <button>all</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div class="items">
    <p>Item 1</p>
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 3</p>
    <p>Item 3</p>
  </div>
</div>

<div class="filter">
  <div class="filters">
    <button>all</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div class="items">
    <p>Item 1</p>
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 3</p>
    <p>Item 3</p>
  </div>
</div>
</div>

CSS

.box {
  display: flex;
  gap: 50px;
}

JavaScript

document.querySelectorAll('.filter').forEach(f => f.querySelectorAll('button').forEach(b => {
	b.onclick = () => {
    f.querySelectorAll('.items p').forEach(p => {
      if (b.textContent == "all") { return p.style.display = "block"; }
      if (p.textContent.indexOf(b.textContent) == -1) return p.style.display = "none";
      
      p.style.display = "block";
    });
  }
}));