track-items

HTML

<ul id="group">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>
<div id="output"></div>

CSS

.active {
  background: teal;
}

JavaScript

.innerHTML// Take a list of items, triggered by an event, and run callback
var trackItems = function(parent,items,event,cb) {
	Array.from(items).forEach((el,i) => {
  	(function(element,index) {
    	el.addEventListener(event, function(e) {
      	cb(index)
      })
    })(el,i)
  })
}

const dom = {
	parent: document.querySelector("#group"),
	items: document.querySelectorAll("#group > li"),
  output: document.querySelector("#output")
}

function callback(i) {
	dom.output.innerHTML = i
}

trackItems(dom.parent,dom.items,"mouseover",callback)