title: Setting background color of div on click
body: <p>I have a set of dynamically generated div elements like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div on-click="selected"&gt;one&lt;/div&gt;
  &lt;div on-click="selected"&gt;two&lt;/div&gt;
  &lt;div on-click="selected"&gt;three&lt;/div&gt;
  &lt;div on-click="selected"&gt;four&lt;/div&gt;
  &lt;div on-click="selected"&gt;five&lt;/div&gt;
  &lt;div on-click="selected"&gt;six&lt;/div&gt;
  &lt;div on-click="selected"&gt;seven&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to change the background color of div on which it is clicked and lose it when another div is clicked.</p>
  
  <p>I could achieve this using tabindex, but I want to retain it until I click it on the another div or clear it intentionally, which tabindex does not provide.</p>
  
  <p>How can I acieve it using javascript?</p>