(function () {

  // var list = document.getElementsByClassName('tags-box');
  var list1 = document.getElementById('list1');
  var p1 = list1.getElementsByTagName('span');
  for (var i = 0; i < p1.length; i++) {
    p1[i].onclick = function () {
      for (var i = 0; i < p1.length; i++) {
        p1[i].className = 'tags-box-span';

      }
      this.className = 'active';
    }
  }

  var list2 = document.getElementById('list2');
  var p2 = list2.getElementsByTagName('span');
  for (var i = 0; i < p2.length; i++) {
    p2[i].onclick = function () {
      for (var i = 0; i < p2.length; i++) {
        p2[i].className = 'tags-box-span';

      }
      this.className = 'active';
    }
  }

  var list3 = document.getElementById('list3');
  var p3 = list3.getElementsByTagName('span');
  for (var i = 0; i < p3.length; i++) {
    p3[i].onclick = function () {
      for (var i = 0; i < p3.length; i++) {
        p3[i].className = 'tags-box-span';

      }
      this.className = 'active';
    }
  }

  var list4 = document.getElementById('list4');
  var p4 = list4.getElementsByTagName('span');
  for (var i = 0; i < p4.length; i++) {
    p4[i].onclick = function () {
      for (var i = 0; i < p4.length; i++) {
        p4[i].className = 'tags-box-span';

      }
      this.className = 'active';
    }
  }

})();