title: How can I highlight an element on click with JavaScript?
body: <p>I am working on a 2-player-game for a group project, where you have to choose an avatar in order to start the game. The chosen avatar is then shown in the actual game. </p>
  
  <p>Therefore I am looking for a solution for the following situations:
  1. The chosen image is highlighted with a border, when you click on it.
  2. Each player can choose only one avatar (i.e. image) - so the border of an image would be removed if you click on another one.</p>
  
  <p>This is my html code: </p>
  
  <pre><code>&lt;div class="col span-1-of-2"&gt;
      &lt;h3&gt;Player 1:&lt;/h3&gt;
      &lt;input type="text" name="name" id="name" placeholder="" required&gt;
      &lt;div class="avatar"&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="avatar"&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col span-1-of-2"&gt;
      &lt;h3&gt;Player 2:&lt;/h3&gt;
      &lt;input type="text" name="name" id="name" placeholder="" required&gt;
      &lt;div class="avatar"&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="avatar"&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
          &lt;div class="col span-1-of-3"&gt;&lt;input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>