JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.1/clipboard.min.js"></script>
<table id="diff_table">
<tr>
<th class="added1">1</th>
<!-- I do not know what your table looks like, so I have to assume some structure, which needs to be reflected in how the newdiff refers to your cell -->
<td class="added"><pre>dummy text 1</pre></td>
</tr>
<tr>
<th>2</th>
<td class="added"><pre>dummy text 2</pre></td>
</tr>
<tr>
<th>3</th>
<td class="added"><pre>dummy text 3</pre></td>
</tr>
<tr>
<th>4</th>
<td class="added"><pre>dummy text 4</pre></td>
</tr>
<tr>
<th>5</th>
<td class="added"><pre>dummy text 5</pre></td>
</tr>
</table>
CSS
#diff_table td, #diff_table th {
border: 1px solid gray;
padding: 5px;
}
#diff_table {
border-collapse: collapse;
}
JavaScript
var diff = document.getElementById('diff_table').getElementsByTagName('tr');
var difflen = diff.length;
// Factorize variables.
var newdiff;
for(i=0; i<difflen; i++) {
//var newdiff = diff[i].childNodes[1];
// I had to create a table on my own that may not reflect your table, so the accessing of the correct cell may be different than your case.
newdiff = diff[i].firstChild;
while (newdiff && newdiff.tagName !== "TD") {
newdiff = newdiff.nextSibling;
}
if (newdiff.className && (newdiff.className == 'added' || newdiff.className == 'modified')) {
newdiff.className += ' diff-select';
newdiff.innerHTML = '<div class="btnbox"><button class="btn btn-default btn-xs">Select</button></div>' + newdiff.innerHTML;
}
}
new Clipboard('.btn', {
// The targeting to the correct content is done here.
target: function(trigger) {
return trigger.parentNode.nextSibling;
}
//clipboard.js will take the entire inner content of the <pre>, I think this is what you are trying to do in your "selectPre" function, but I am not sure.
});