JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">pew</button>
<div class="container">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="div4">4</div>
  <div id="div5">5</div>
  <div id="div6">6</div>
  <div id="other_id">other</div>
  <div id="foo">foo</div>
  <div id="bar">bar</div>
</div>

CSS

.container div {
  width: 100px;
  height: 100px;
  background: orange;
  float: left;
  margin: 10px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  line-height: 100px;
}
.container div[id^='div'] {
  outline: dashed 2px tomato;
}
.container.hide-by-prefix-div div[id^='div'] {
  display: none;
}

JavaScript

btn.addEventListener('click', function(){
	let cont = document.querySelector('.container')
  cont.classList.toggle('hide-by-prefix-div')
})