I am able to add and remove the classes on the child elements but all are active. I am trying to add & remove only on one active element at a time. What am I missing?

```
<ul id="parent" class="container">
  <li class="child"><a href="#one">one</a></li>
  <li class="child"><a href="#two">two</a></li>
  <li class="child"><a href="#three">three</a></li>
</ul>

document.addEventListener("DOMContentLoaded", function() {

  const parent = document.querySelector('#parent');
  parent.style.backgroundColor = 'blue';
  const childrens = document.querySelectorAll('.child');
  const child = document.querySelector('.child a')

  Array.prototype.forEach.call(
   document.querySelectorAll('.child'),
    function(element) {
      element.onclick = addActive;
    }
  );

 function addActive(element){
  element = this;
   if(element.classList.contains('active')) {
    element.classList.remove('active');
   } else {
    element.classList.add('active');
   }
 }
});

```

Here's a: [codepen](https://codepen.io/anon/pen/JOjLyO)