Dynamic tab with onclick change

dynamic tabs , click to change the background/do functionality

by vaheed akhtar

HTML

<h3>Exmaple of tabs</h3>
<div id="main">
 </div>

CSS

.counter{
 height:20;
 width:20;
 font-size:15;
 padding:15px;
 margin:2px;
 text-align:center;
 color:red;
 border: 1px solid grey;
 float:left;
 cursor:pointer;
}

JavaScript

$(document).ready(function(){
  var mainDiv = document.getElementById('main');
  for(var i=1;i<=5;i++){
   var divCount = document.createElement('div');
   divCount.innerHTML='<span class="counter" id='+' i '+'>'+ i +'</span>';
   mainDiv.append(divCount);
  }
  
  $('#main').on('click', 'span', function(){
    $(this).css({background:'#bbb', color:'#fff'});
  })
  
})