Select option change ‘Formation’

I’m building a Football Team Builder with 5 players per team. The idea is to have a select element with the options Formation 1: 1-1-2, Formation 2: 1-2-1, and Formation 3: 2-1-1 (Goalkeepers are not included in the formation).

I build it in a grid with divs of 3×3. See the table as an example:

Now if I select Formation 1: 1-1-2, I only want to display the players according to the selected Formation. That should look like this:

How can I accomplish this for every Select Option with javascript?

CODE

<label for="formation"> Formation </label>
<select id="formation" name="formation">
  <option value="1"> 1-1-2 </option> <!-- 2 Attackers-->
  <option value="2"> 1-2-1 </option> <!-- 2 Midfielders-->
  <option value="3"> 2-1-1 </option> <!-- 2 Defenders-->
</select>

<div class="attackers">
  <div class="card" id="attacker_1"> Attacker 1 </div>
  <div class="card" id="attacker_2"> Attacker 2 </div>
  <div class="card" id="attacker_3"> Attacker 3 </div>
</div>

<div class="midfielders">
  <div class="card" id="midfielder_1"> Midfielder 1 </div>
  <div class="card" id="midfielder_2"> Midfielder 2 </div>
  <div class="card" id="midfielder_3"> Midfielder 3 </div>
</div>

<div class="defenders">
  <div class="card" id="defender_1"> Defender 1 </div>
  <div class="card" id="defender_2"> Defender 2 </div>
  <div class="card" id="defender_3"> Defender 3 </div>
</div>

Here is my JSFiddle: https://jsfiddle.net/dnf7a9c0/4/