JavaScriptのfor文を使ったループでボタンクリックの絞り込み検索

for (let i = 0; i < 5; i++) {
  console.log((i + 1) + '回目の処理です');
}

// 結果
// 1回目の処理です
// 2回目の処理です
// 3回目の処理です
// 4回目の処理です
// 5回目の処理です

<!-- ボタン -->
<div id="searchButtonnBlock">
  <button class="btn onActive" onclick="filterSelection('all')"> 全て</button>
  <button class="btn" onclick="filterSelection('kantou')"> 関東</button>
  <button class="btn" onclick="filterSelection('kansai')"> 関西</button>
  <button class="btn" onclick="filterSelection('okinawa')"> 沖縄</button>
  <button class="btn" onclick="filterSelection('island')"> 島</button>
</div>

<!-- グルーピングの要素 -->
<ul class="searchList">
  <li class="filterDiv kantou">東京</li>
  <li class="filterDiv kantou">神奈川</li>
  <li class="filterDiv kantou">千葉</li>
  <li class="filterDiv kansai">大阪</li>
  <li class="filterDiv kantou">埼玉</li>
  <li class="filterDiv kansai">京都</li>
  <li class="filterDiv okinawa">那覇</li>
  <li class="filterDiv kantou">群馬</li>
  <li class="filterDiv okinawa island">石垣島</li>
  <li class="filterDiv kansai island">淡路島</li>
  <li class="filterDiv kantou">茨城</li>
  <li class="filterDiv kantou island">八丈島</li>
  <li class="filterDiv kansai">兵庫</li>
  <li class="filterDiv okinawa island">小浜島</li>
  <li class="filterDiv kansai">奈良</li>
</ul>

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    searchRemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) searchAddClass(x[i], "show");
  }
}

function searchAddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function searchRemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

var btnContainer = document.getElementById("searchButtonnBlock");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("onActive");
    current[0].className = current[0].className.replace(" onActive", "");
    this.className += " onActive";
  });
}

div#searchButtonnBlock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
div#searchButtonnBlock button {
   width: 18%;
    text-align: center;
    padding: 30px 0;
    margin: 0;
}
ul.searchList {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    border: none;
    margin: 15px 0 0;
    justify-content: space-between;
    gap: 0;
    position: relative;
}
ul.searchList:after {
    content: "";
    width: 25%;
}
li.filterDiv {
    display: none;
}
li.filterDiv.show {
    position: relative;
    background-color: #FFF;
    color: #707070;
    width: calc(25% - 3px);
    padding: 15px 0;
    text-align: center;
    gap: 3px;
    display: inline-block;
    margin-bottom: 3px;
}

.show {
  display: inline-block;
}

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
div#searchButtonnBlock button.btn.onActive {
    background: #313131;
    color: #fff;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
div#searchButtonnBlock button {
    width: 49%;
    padding: 12px 0;
    margin-bottom: 6px;
}
li.filterDiv.show {
    width: 49%;
}
}