<div class="clicker"></div>
<div class="clicker"></div>
<div class="clicker"></div>
<div class="clicker"></div>
<div class="clicker"></div>
<div class="clicker"></div>
<div class="clicker"></div>
$.fn.clicker = function() {
var template = `
<div class="clicker">
<p>You clicked <span class="panel">0</span> times</p>
<button>Click Me</button>
</div>
`;
this.html(template);
this.find('.clicker').each(function() {
$(this).data('clicks', 0);
});
this.on('click', 'button', function() {
var $this = $(this).closest('.clicker');
var clicks = $this.data('clicks');
clicks++;
$this.data('clicks', clicks);
$this.find('.panel').text(clicks);
});
};
$('.clicker').clicker();
This Pen doesn't use any external CSS resources.