JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<button>Trigger first click below</button><br><br>

<!-- data-arg must contain valid JSON (http://jsonlint.com/) -->
<!-- { "key1" : "value1", "key2" : "value2" } -->

<div class="test" data-quantity="1" data-type="pizza" data-extra1="peperoni" data-extra2="cheese" data-extra3="cheesy bread">Click Me</div>

<div class="test" data-quantity="3" data-type="pizza" data-extra1="bacon" data-extra2="anchovies" data-extra3="Pepsi">Click Me</div>

<br>
Event: <span id="display">...</span>

CSS

.test {
    cursor: pointer;
}

JavaScript

$('.test').click(function(e, triggered){
    var msg = 'clicked' + (triggered ? ', triggered' : '') + '<br>';

    var args = $(this).data();
    $.each(args, function(k,v){
        msg += k + ': ' + v + ',<br>';
    });
    
    $('#display').html(msg);
});

$('button').click(function(){
    $('.test:first').trigger('click', true);
});