JSFiddle - React, Tailwind, and code Playground

by marcofranssen

HTML

<p>buttons are in some table with more data, so each row can have different buttons.</p><p>All my modules are build like this, so I don't want to change to much in my module structure, because this is the only module which requires this functionality.</p>
<button class="actionButton" data-action="send">Click me</button>
<button class="actionButton" data-action="send">Click me</button>
<button class="actionButton" data-action="remove">Click me</button>
<button class="actionButton" data-action="remove">Click me</button>

JavaScript

//Code in app.js
(function($, bis, window, document, undefined) {
    "use strict";
    //other app code
    bis.library = bis.library ||
    function(module) {
        $(function() {
            if (module.init) {
                module.init();
            }
        });
        return module;
    };

    //other app code
})(jQuery, window._bis = window._bis || {}, window, document);

//Code in worklist.js
(function($, bis, window, document, undefined) {
    "use strict";
    var common = bis.common,
        urls = bis.urls,
        defaults = bis.defaults,
        createWorklist = bis.createWorklist,
        editWorklist = bis.editWorklist,
        editMoveBoxesWorklist = bis.editMoveBoxesWorklist;

    bis.worklist = bis.worklist || bis.library((function() {
        var self = this,
            moveBoxesWorklistString = 'Move boxes Worklist',
            checkoutWorklistString = 'Checkout Worklist',
            destroyWorklistString = 'Destroy Worklist',
            gridId = '#worklistGrid',
            dialogId = '#worklistDialog',
            grid = null,
            pager = null,
            dialog = null;

        var init = function() {
            grid = $(gridId + 'List', gridId);
            pager = $(gridId + 'Pager', gridId);
            initGrid();
            initDialog();

            if (createWorklist) {
                $(createWorklist).on('worklistCreated', worklistChanged);
            }
            setupKnockoutBindingHandler();
        };

        var getIcon = function(action) {
            switch (action) {
            case 'treat':
                return 'ui-icon-triangle-1-e';
            case 'pickup':
                return 'ui-icon-flag';
            case 'send':
                return 'ui-icon-mail-closed';
            case 'finish':
                return 'ui-icon-check';
            case 'print':
                return 'ui-icon-print';
            default:
                return '';
            }
        };

        var...