Add copy button per row

Add a button with the ability to copy the text inside the cell it's in.

by pshock13

HTML

<table>
<thead>
  <th>Tools</th>
  <th>Shipment</th>
  <th>Barcode</th>
  <th>More Info</th>
</thead>
<tbody>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=123456789">123456789</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=asdfghjkl">asdfghjkl</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>9870356542</span>
      </div>
    </td>
  </tr>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=987654321">987654321</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=qwertyuiop">qwertyuiop</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>asfg456sdfg</span>
      </div>
    </td>
  </tr>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=123456789">123456789</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=asdfghjkl">asdfghjkl</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>9870356542</span>
      </div>
    </td>
  </tr>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=987654321">987654321</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=qwertyuiop">qwertyuiop</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>asfg456sdfg</span>
      </div>
    </td>
  </tr>
</tbody>
</table>

CSS

*{
  box-sizing: border-box;
}
table{
  border-collapse:collapse;

}
th{
border:1px solid black;
border-collapse:collapse;
padding:5px;
background-color: #EAEAEA;
}
td{
border:1px solid #7B9AB5;
border-collapse:collapse;
}
td a{
  text-decoration:none;
}
.copy{
  opacity:0;
}
.copy:hover{
  opacity:100;
  cursor:pointer;
}

JavaScript

var copyBtn = "<span class='copy' onClick='copyText()'>&#128203;</span>"

var shipmentCells = document.querySelectorAll("tbody tr > td:nth-child(2) > div");
for(var i = 0; i < shipmentCells.length; i++){
  //Append the new element to the innerHTML
  shipmentCells[i].innerHTML += copyBtn;
}