JSFiddle - React, Tailwind, and code Playground

by Avinash_R

HTML

<link rel="stylesheet" href="https://github.com/michael/multiselect/raw/master/css/common.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://github.com/michael/multiselect/raw/master/css/ui.multiselect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://raw.github.com/michael/multiselect/master/js/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script src="https://raw.github.com/michael/multiselect/master/js/ui.multiselect.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>

JavaScript

$(function() {
    var TARGET, FIELDSET;
    TARGET = "{{#targets}}\n<option value='{{id}}' {{#selected}}selected='selected'{{/selected}}>{{name}}</option>\n{{/targets}}";
    FIELDSET = "<fieldset class='ui-corner-all ui-widget-content smokey'>\n  {{#closable}}<a href='javascript:;' class='close' title='Remove'>[x]</a>{{/closable}}\n  <input type='hidden' name='id' value='{{modeId}}'/>\n  <table style='width: 100%; height: 100%;'>\n    <tbody>\n      <tr>\n        <td>Name:</td>\n        <td><input type='text' name='name' value='{{name}}'/></td>\n      </tr>\n      <tr>\n        <td>Targets:</td>\n        <td><select name='target' multiple='true' style='width: 200px;'></select></td>\n      </tr>\n    </tbody>\n  </table>\n</fieldset>";

    var body = $(document.body);
    var count = 0;

    var btn = $("<button>Add</button>").css({
        position: 'fixed',
        bottom: '1px',
        right: '1px'
    }).click(function() {
        $(Mustache.render(FIELDSET, {
            modeId: count++,
            name: "Untitled" + count
        })).appendTo(body).find("[name=name]").change().end().find("select").multiselect();
    });

    body.append(btn).on("change", "[name=name]", function() {
        var targets, elms, i, l, elm;
        targets = [];
        elms = body.find("[name=name]");
        for (i = 0, l = elms.length; i < l; i++) {
            elm = elms.eq(i);
            targets[i] = {
                id: elm.siblings("[name=id]").val(),
                name: elm.val()
            };
        }
        body.find("[name=target]").html(Mustache.render(TARGET, {
            targets: targets
        }));
    });

    btn.click();
});