title: Javascript: change color on click and disable rest icons
body: <p>So I have 6 icons, initially all are grey except one which is treated as selected. If click on some other icon that icon should be enabled and the other one should be turned grey. I'm using <code>classList.toggle("selected");</code> to change it but I'm not getting desired result. Here is the code.</p>
  
  <p>CSS</p>
  
  <pre><code>.selected {
      color : #012b72;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;i class="selected icon-toggle"&gt;&lt;/i&gt;
  &lt;i class="icon-toggle"&gt;&lt;/i&gt;
  &lt;i class="icon-toggle"&gt;&lt;/i&gt;
  &lt;i class="icon-toggle"&gt;&lt;/i&gt;
  &lt;i class="icon-toggle"&gt;&lt;/i&gt;
  &lt;i class="icon-toggle"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>icons=document.getElementsByClassName("icon-toggle");
  
   for(i=0;i&lt;icons.length;i++){       
     icons[i].addEventListener("click", function() {
       this.classList.toggle("selected");
     });
   }
  </code></pre>