Shortening Divs

I have a project here that looks pretty good and does exactly what I want it to do. The codepen is here. What I need to find out is if these divs that flip can be shortened in any way:

<div class="flip-container" id="flipcontainer">
    <div class="flipper" id="flipper">
        <div class="front" id="front">
            <img src="example.jpg"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')">&#xf013;</span>
        </div>
        <div class="back" id="back">
            <img src="settings-512.png" class="settings"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')">&#xf112;</span>
        </div>
    </div>
</div>
<div class="flip-container" id="flipcontainer">
    <div class="flipper" id="flipper2">
        <div class="front" id="front">
            <img src="example.jpg"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')">&#xf013;</span>
        </div>
        <div class="back" id="back">
            <img src="settings-512.png" class="settings"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')">&#xf112;</span>
        </div>
    </div>
</div>
<div class="flip-container" id="flipcontainer">
    <div class="flipper" id="flipper3">
        <div class="front" id="front">
            <img src="example.jpg"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')">&#xf013;</span>
        </div>
        <div class="back" id="back">
            <img src="settings-512.png" class="settings"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')">&#xf112;</span>
        </div>
    </div>
</div>

This seems bulky and too “brute force method”. The solution would preferably be in HTML, but JS would not be a problem.

• Use a naming convention such as BEM, OOCSS, SMACSS, etc. (In the example below I’ve used BEM.)
• IDs should be unique throughout a document. There should be only one element with a given ID. However, you can apply multiple classes to one element.
• Take the inline styling out of the <span>s and put it in the CSS.
• Instead of <br class="spacer">, in general use a <div> instead of a <span> after it or apply display: block in the CSS. Although…
• Using a <span> is unsemantic in this case. It would be better to use a <button> (although you will have to adjust the styling). I’m half-waiting for someone to come past and give me an hour’s lecture on what tag should be used here.
• Don’t use onclick attributes, use addEventListener() in JavaScript instead.
• Empty elements like <br> and <img>: you can put / before the end of the tag if you want, but it’s better to be consistent and either do it for all tags or don’t do it.

The reason it looks repetitive is that on websites you often use server-side templating, possibly with {{ this sort of thing }}, or an HTML preprocessor like Pug (previously Jade). Server-side processing can reduce repetition.

With this in mind, your HTML will probably look something like this (I haven’t tried it out or changed the CSS to match):

<div id="flipper1" class="flipper">
  <div class="flipper__inner">
    <div class="flipper__front">
      <img src="example.jpg">
      <button class="flipper__trigger">&#xf013;</button>
    </div>
    <div class="flipper__back">
      <img src="settings-512.png" class="flipper__settingsIcon">
      <button class="flipper__trigger">&#xf112;</button>
    </div>
  </div>
</div>
<div id="flipper2" class="flipper">
  <!-- ...same as before... -->
</div>
<div id="flipper3" class="flipper">
  <!-- ...same as before... -->
</div>