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-args='{ "quantity": 1, "type": "pizza", "extra1": "peperoni", "extra2": "cheese", "extra3": "cheesy bread" }'>Click Me</div>

<div class="test" data-args='{ "quantity": 3, "type": "pizza", "extra1": "bacon", "extra2": "anchovies", "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('args');
    $.each(args, function(k,v){
        msg += k + ': ' + v + ',<br>';
    });
    
    $('#display').html(msg);
});

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