I'm attempting to create a 'Pick your hero' thing. There are a total of 113 heroes, each are given tags respective to them, for example: wizard, fighter etc.

The way I've done it so far is create a container and add 114 total div's to that container. I have this:

```
.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]);
}

```

I was thinking of creating an array, for example 

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

```

and once they click on a checkbox to show only wizard heroes it would do a for loop to hide all 113 divs and then do:

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

```

But it just seems like this is a bad approach to it, or really messy/ugly. I don't really like using library's, including jquery. Is using div's even the right approach? Can anyone with experience give me some advice or links to follow since I must be searching the wrong terms for this.

Also can someone give me some intro on how to create a search bar where they can write hero names and it does the same thing? Reordering and hiding everything properly. Could be cool to have a transition too but not necessary lol. Thanks in advance for reading and all your help.

EDIT: Added my own post since it would have made this too long, let me know what you think