JSFiddle - React, Tailwind, and code Playground

HTML

<div id="purple">
    <div class="add"></div>
</div>
<div id="green">
    <div class="add"></div>
</div>

CSS

div {
    display:block;
    width:50px;
    height:50px;
    border:1px solid #000;
}
#purple {
    background:#A233CF;
}
#green {
    background: #A7CF33;
}

JavaScript

(function () {
    var extra = {
        green: function () {
            //put extra codes
            console.log('green callback');
        }
    };

    $('.add').parent().on('click', function (e) {
        var product = e.currentTarget;
        addProduct(product, extra[product.id]);
    });

    function addProduct(product, callbackExtra) {
        $(product).addClass('added');
        $(product).find('.more-info').addClass('hide');
        $(product).find('.panel-collapse').removeClass('in');

        if (callbackExtra) {
            callbackExtra();
        }
    }
})();