javascript - フィルターと検索バーに応じて画像を並べ替えて非表示にする

Question

「ヒーローを選ぶ」ものを作成しようとしています。合計 113 人のヒーローがいて、それぞれにタグが付けられています。たとえば、ウィザード、ファイターなどです。

これまでに行った方法は、コンテナーを作成し、そのコンテナーに合計 114 個の div を追加することです。私はこれを持っています：

.heroPics {
    background-image: url(newHeroes.jpg);
    background-size: 792px 792px;
    width: 72px;
    height: 72px;
    float: left;
    margin-left: 5px;
    margin-top: 20px;
    text-align: center;
    line-height: 11;
    font-size: 15px;
    position: relative;
}

for (var i = 1; i < 114; i++) { 
    srsHeroes[i] = document.createElement("div");
    srsHeroes[i].textContent = theNames[i];
    srsHeroes[i].className = "championPics " + theNames[i] + "-sprite";
    srsHeroes[i].draggable = false;
    srsHeroes[i].name = theNames[i];
    srsHeroes[i].num = i;
    heroSelection.appendChild(srsHeroes[i]);
}

たとえば、配列を作成することを考えていました

wizard = [ 14, 17, 28, 34, 69, 90, 101 ];

チェックボックスをクリックしてウィザードのヒーローのみを表示すると、for ループが実行されて 113 個の div すべてが非表示になり、次のようになります。

  for (var i = 50; i < 70; i++) {   
    heroSelection.insertBefore(srsHeroes[wizard[i]], srsHeroes[115]);
//and also do style.visiblity = "visible";
    }

しかし、これはそれに対する悪いアプローチであるか、本当に面倒/醜いようです。jqueryを含むライブラリを使用するのはあまり好きではありません。div を使用することは正しいアプローチですか? これについて間違った用語を検索しているに違いないので、経験のある人なら誰でもアドバイスや従うべきリンクを教えてもらえますか.

また、ヒーローの名前を書くことができる検索バーを作成する方法について紹介してもらえますか?同じことを行いますか? すべてを適切に並べ替えて非表示にします。移行もクールかもしれませんが、必要ではありません笑。読んでくれてありがとう。

編集：これは長すぎるので、私自身の投稿を追加しました。あなたの考えを教えてください