JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="one">element number one</div>
<div id="two">element number two</div>

JavaScript

var DOMWrapper = function(id) {
    this.count = 0;
    if (typeof id === 'string') {
        this.fetchById(id);
    }
};
DOMWrapper.prototype.fetchById = function(the_id) {
    this.element = document.getElementById(the_id);
    if( this.element != null ) {
        this.setup();
    }
};
DOMWrapper.prototype.setup = function() {
    if (this.element != null) {
        var wrapper = this;
        this.listener = function() {
            wrapper.count++;
            wrapper.element.appendChild( 
                document.createTextNode( ' ' + wrapper.count )
            );
            if( wrapper.count === 10 ) {
                wrapper.tear_down();
            }
        };
        this.element.addEventListener('click', this.listener, false);
    } else {
        this.no_element();
    }
};
DOMWrapper.prototype.no_element = function() {
    alert("you must first fetch an element");
};
DOMWrapper.prototype.tear_down = function() {
    if (this.element != null) {
        if( typeof this.listener === 'function' ) {
            this.element.removeEventListener('click', this.listener );
        }
    } else {
        this.no_element();
    }
};

var wrapper1 = new DOMWrapper();
wrapper1.fetchById("one");

var wrapper2 = new DOMWrapper( "two" );