JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">foo</div>
<div id="two">bar</div>

CSS

div{
    float:left;
    height:100px;
    width:100px;
	background:red;
	margin-left:10px;
}

JavaScript

(function(foobar) {
    foobar.elements = (function() {
        var one, two;
        
        return{
            one: function(){
                return one || (one = $('#one'));
            },
            two: function(){
                return two || (two = $('#two'));
            }   
        }
    })();
                               
    foobar.eventListeners = (function(elems){       

        return {
            oneOnClick: function(e) {
				alert('1');
            },
            twoOnClick: function(e) {
				alert('2');
            }
        }
    })(foobar.elements);
                    
    foobar.bindEventListeners = (function(elems, listeners) {
        return function () {
            $(document).on('click', elems.one(), listeners.oneOnClick);

            $(document).on('click', elems.two(), listeners.twoOnClick);
        }
    })(foobar.elements, foobar.eventListeners);
    
    foobar.init = function (options) {
        foobar.bindEventListeners();
    };
})(window.foobar = window.foobar || {});
foobar.init();