Как применить js код к своему блоку?

let blogItems = document.querySelectorAll('.filter-column');
if (blogItems.length > 0) {
  let blogFilters = document.querySelectorAll('.filter__title');
  if (blogFilters.length > 0) {
    for (let index = 0; index < blogFilters.length; index++) {
      const blogFilter = blogFilters[index];
      blogFilter.addEventListener("click", function(e) {
        e.preventDefault();
        const blogFilterValue = blogFilter.dataset.filter;
        const blogFilterActive = document.querySelector('.filter__title._active');
        blogFilter.classList.add('_active');

        let o = e.target.closest('nav').nextElementSibling
        blogItems = o.querySelectorAll('.filter-column');
        showBlogItems(blogFilterValue);
      });
    }

    function showBlogItems(filter) {
      for (let index = 0; index < blogItems.length; index++) {
        const blogItem = blogItems[index];
        if (filter === 'all' || !filter) {
          blogItem.classList.remove('_hide');
          blogItem.classList.remove('_active');
        } else {
          blogItem.classList.add('_hide');
          blogItem.classList.remove('_active');
          if (blogItem.classList.contains('filter__column_' + filter)) {
            blogItem.classList.remove('_hide');
            blogItem.classList.add('_active');
          }
        }
      }
    }
  }
}

.filter-column._hide {
  display: none;
}

<div>
  <nav class="filter__navigation">
    <button data-filter="all" type="button" class="filter__title _active">
    <span class="button"> Все результаты </span>
  </button>
    <button data-filter="article-1" type="button" class="filter__title">
    <span class="button">Статьи 1</span>
  </button>
    <button data-filter="article-2" type="button" class="filter__title">
    <span class="button">Статьи 2</span>
  </button>
    <button data-filter="article-3" type="button" class="filter__title">
    <span class="button">Статьи 3</span>
  </button>
  </nav>
  <div class="search__body">
    <div class="search__column filter-column filter__column_article-1">
      lorem1
    </div>
    <div class="search__column filter-column filter__column_article-2">
      lorem2
    </div>
    <div class="search__column filter-column filter__column_article-3">
      lorem3
    </div>
  </div>
</div>

<div>
  <nav class="filter__navigation">
    <button data-filter="all" type="button" class="filter__title _active">
    <span class="button"> Все результаты </span>
  </button>
    <button data-filter="services-1" type="button" class="filter__title">
    <span class="button">Услуга 1</span>
  </button>
    <button data-filter="services-2" type="button" class="filter__title">
    <span class="button">Услуга 2</span>
  </button>
    <button data-filter="services-3" type="button" class="filter__title">
    <span class="button">Услуга 3</span>
  </button>
  </nav>
  <div class="search__body">
    <div class="search__column filter-column filter__column_services-1">
      lorem1
    </div>
    <div class="search__column filter-column filter__column_services-2">
      lorem2
    </div>
    <div class="search__column filter-column filter__column_services-3">
      lorem3
    </div>
  </div>
</div>

document.querySelector('main').addEventListener('click', e => {
  const ob = e.target.closest('.filter__title')
  if (!ob) return
  let t = ob.dataset.filter
  const on = ob.closest('nav')
  const od = on.nextElementSibling
  on.querySelector('._active').classList.remove('_active')
  ob.classList.add('_active')
  od.querySelectorAll('._hide').forEach(o => o.classList.remove('_hide'))
  if (t === 'all') return
  t = `.search__column:not(.filter__column_${t})`
  od.querySelectorAll(t).forEach(o => o.classList.add('_hide'))
})

.filter-column._hide {
  display: none;
}
._active {
    background-color: green;
}

<main>
    <div>
      <nav class="filter__navigation">
        <button data-filter="all" type="button" class="filter__title _active">
        <span class="button"> Все результаты </span>
      </button>
        <button data-filter="article-1" type="button" class="filter__title">
        <span class="button">Статьи 1</span>
      </button>
        <button data-filter="article-2" type="button" class="filter__title">
        <span class="button">Статьи 2</span>
      </button>
        <button data-filter="article-3" type="button" class="filter__title">
        <span class="button">Статьи 3</span>
      </button>
      </nav>
      <div class="search__body">
        <div class="search__column filter-column filter__column_article-1">
          lorem1
        </div>
        <div class="search__column filter-column filter__column_article-2">
          lorem2
        </div>
        <div class="search__column filter-column filter__column_article-3">
          lorem3
        </div>
      </div>
    </div>

    <div>
      <nav class="filter__navigation">
        <button data-filter="all" type="button" class="filter__title _active">
        <span class="button"> Все результаты </span>
      </button>
        <button data-filter="services-1" type="button" class="filter__title">
        <span class="button">Услуга 1</span>
      </button>
        <button data-filter="services-2" type="button" class="filter__title">
        <span class="button">Услуга 2</span>
      </button>
        <button data-filter="services-3" type="button" class="filter__title">
        <span class="button">Услуга 3</span>
      </button>
      </nav>
      <div class="search__body">
        <div class="search__column filter-column filter__column_services-1">
          lorem1
        </div>
        <div class="search__column filter-column filter__column_services-2">
          lorem2
        </div>
        <div class="search__column filter-column filter__column_services-3">
          lorem3
        </div>
      </div>
    </div>
</main>