JSFiddle - React, Tailwind, and code Playground

by brianjmiller

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
</head>
<body class="yui3-skin-sam">
<div id="buttonContainer">                                            
  <button class="yui3-button a" extra='1'>a</button>    
  <button class="yui3-button b" extra='2'>b</button>
  <button class="yui3-button c" extra='3'>c</button>
</div>
</body>
</html>

JavaScript

YUI().use('button', function(Y) {
    var div = Y.one('#buttonContainer');

    var a1 = new Y.Button(
        {
            render: div,
            label: "a"
        }
    );
    a1.get("contentBox").setData("extra", 1);
    
    var b2 = new Y.Button(
        {
            render: div,
            label: "b"
        }
    );
    b2.get("contentBox").setData("extra", 2);

    var c3 = new Y.Button(
        {
            render: div,
            label: "c"
        }
    );
    c3.get("contentBox").setData("extra", 3);
    
    Y.delegate('click', function (e){
        alert(e.target.getAttribute('class')+e.target.getAttribute('extra'));
        alert(e.target.getData("extra"));
    }, 'body', '.yui3-button');
})