Edit in JSFiddle

var oojs = (function(oojs) {

  var createToolbarItem = function(itemElement) {

    var item = {
      toggleActiveState: function() {
        this.activated = !this.activated;
      }
    };

    Object.defineProperties(item, {
      el: {
        value: itemElement
      },
      enabled: {
        get: function() {
          return !this.el.classList.contains('disabled');
        },
        set: function(value) {
          if (value) {
            this.el.classList.remove('disabled');
          } else {
            this.el.classList.add('disabled');
          }
        }
      },
      activated: {
        get: function() {
          return this.el.classList.contains('active');
        },
        set: function(value) {
          if (value) {
            this.el.classList.add('active');
          } else {
            this.el.classList.remove('active');
          }
        }
      }

    });

    return item;
  };

  var createToolbarItems = function(itemElements) {
    var items = [];

    [].forEach.call(itemElements, function(el, index, array) {
      var item = createToolbarItem(el);
      items.push(item);
    });
    return items;
  };

  oojs.createToolbar = function(elementId) {
    var element = document.getElementById(elementId);

    if (!element) {
      element = document.createElement('div');
      element.id = elementId;
      element.className = 'toolbar';
    }

    var items = element.querySelectorAll('.toolbar-item');

    var toolbar = {
      add: function(options) {
        var span = document.createElement('span');
        span.className = 'toolbar-item';
        this.el.appendChild(span);
        var item = createToolbarItem(span);
        this.items.push(item);
      },
      remove: function(index) {
        var len = this.items.length;
        if (index > len || index < 0) {
          throw new Error('Index is out ');
        }
        var item = this.items[index];
        this.items.splice(index, 1);
        this.el.removeChild(item.el);
        item = null;
      },
      appendTo: function(parentElement) {
        parentElement.appendChild(this.el);
      }
    };

    Object.defineProperties(toolbar, {
      el: {
        value: element
      },
      items: {
        value: createToolbarItems(items),
        enumerable: true
      }
    });

    return toolbar;
  };

  return oojs;
}(oojs || {}));


var toolbar = oojs.createToolbar('myToolbar');
toolbar.items[0].enabled = false;
//toolbar.items[0].enabled = true;
toolbar.items[1].activated = true;
//toolbar.items[1].activated = false;
toolbar.items[2].toggleActiveState();
//toolbar.add();
toolbar.remove(2);
 
/*
var toolbar2 = oojs.createToolbar('myToolbar2');
toolbar2.appendTo(document.body);
toolbar2.add();
*/

.toolbar {
  background-color: #ccc;
  height: 50px;
  padding: 5px;
  margin: 5px;
}

.toolbar-item {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: #00f;
  margin: 5px;
}

.active {
  background-color: #ff0;
}

.disabled {
  background-color: #555;
}

<div id="myToolbar" class="toolbar">
  <span class="toolbar-item">0</span>
  <span class="toolbar-item">1</span>
  <span class="toolbar-item">2</span>
  <span class="toolbar-item">3</span>
</div>