JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="boxes">
    <div></div>
    <div></div>
    <div></div>
    <div data-increase="50" data-text="mytext"></div>
    <div></div>
    <div data-increase="50"></div>
</div>

CSS

body { margin: 20px; }

#boxes > div {
	width: 20px;
    height: 20px;
    border: 1px solid #e1e1e1;
    float: left;
    clear: both;
}

#boxes div div { border: 1px solid red; }

JavaScript

$(document).ready(function() {
    $('#boxes > div').box();
});

(function($) {
  $.fn.extend({
    box: function( options ) {
      
      var defaults = {
          increase: 20
      };
        
      return this.each(function() {

        var box = $(this),
            boxD = box.data(),
            o = $.extend( true, {}, defaults, options, boxD );

        box.on("click", function() {
       
            box.width( '+=' + o.increase );
            
        });

          if ( boxD.text ) { 
              $('<div class="child">' + boxD.text + '</div>').appendTo( box );
              box.width( 'auto' );
          }

                    
      });  

    }
  });
})(jQuery);