JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<div class="element" id="elem"></div>
<div class="element" id="elem2"></div>
<div class="element" id="elem3"></div>
<div class="element" id="elem4"></div>

JavaScript

(function(window, $){
  var Plugin = function(elem, options){
      this.elem = elem;
      this.$elem = $(elem);
      this.options = options;
      this.metadata = this.$elem.data('plugin-options');
    };

  Plugin.prototype = {
    defaults: {
      message: 'Hello world!'
    },
    init: function() {
      this.config = $.extend({}, this.defaults, this.options, this.metadata);

      this.displayMessage();

      return this;
    },
    displayMessage: function() {
      var i = 0;

      this.$elem.each( function() {
        i++;
      } );

      alert( i );
      // alert(this.config.message);
    }
  }

  Plugin.defaults = Plugin.prototype.defaults;

  $.fn.plugin = function(options) {
    return this.each(function() {
      new Plugin(this, options).init();
    });
  };

  window.Plugin = Plugin;
})(window, jQuery);

Plugin.defaults.message = 'Goodbye, people!';

$('.element').plugin();

// var p = new Plugin(document.getElementById('elem')).init();
// $('#elem2').plugin({
//     message: 'Goodbye, World!'
// });
//Or, set the global default message: