JSFiddle - React, Tailwind, and code Playground

by James Greene

HTML

<script src="http://zeroclipboard.org/javascripts/zc/v1.2.0/ZeroClipboard.js"></script>
<table width="0" border="0">
    <tr>
        <td>
            <input type='text' id='textid_text' value='your text' />
        </td>
        <td>
            <div id='textid' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid2_text' value='your text 2' />
        </td>
        <td>
            <div id='textid2' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid3_text' value='your text 3' />
        </td>
        <td>
            <div id='textid3' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid4_text' value='your text 4' />
        </td>
        <td>
            <div id='textid4' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid5_text' value='your text 5' />
        </td>
        <td>
            <div id='textid5' class='clip_button'>COPY</div>
        </td>
    </tr>
</table>

CSS

.clip_button {
    background:#063;
    padding:4px;
    width:100px;
}
.clip_button.zeroclipboard-is-hover {
    background:#00f;
}

JavaScript

var clip = new ZeroClipboard($(".clip_button"), {
 	    moviePath: 'http://zeroclipboard.org/javascripts/zc/v1.2.0/ZeroClipboard.swf?nocache=123123123123',
 	    allowScriptAccess: 'always',
 	    trustedDomains: ['*']
 	});

 	clip.on('load', function (client) {
 	    alert("movie is loaded");
 	    clip.on('datarequested', function (client, args) {
 	        clip.setText($("#" + this.id + "_text").val());
 	    });

 	    clip.on('complete', function (client, args) {
 	        alert("clipboard copied: " + args.text);
 	    });
 	});