JavaScript CopyToClipboard on same row as onclick button

Question

I have the following script which copies a cell data from a table (that cell is hidden - the JS grabs the data, show has to momentary show it); it works great, but only on the "bbcode2" ID and the "onclick="CopyToClipboard2" on any row only affects the very first row "bbcode2" ID record

I have no idea how to get the JS to grab the same cell on the same row as onclick button. I tried adding .closest(#bbcode2), but that still only grabs the first instance of bbcode2

I can replace the bbcode2 with a dynamic ID if I need to

<script type="text/javascript">
function CopyToClipboard2() {
    document.getElementById("bbcode2").style.display = 'block';
    document.getElementById("bbcode2").focus();
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById("bbcode2"));
        range.select().createTextRange();
        document.execCommand("Copy");
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.selectNode(document.getElementById("bbcode2"));
        window.getSelection().addRange(range);
        document.execCommand("Copy");
    }
    document.getElementById("bbcode2").style.display = 'none';
}

Edit -

I added a variable ID to each record, and I now have the following, but it requires I click on the cell for it to work. I want it to occur via a button on the same row in the table

Ideas?

addEventListener('click', function (ev) {
    var serviceID = ev.target.id;
    alert(serviceID);
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(serviceID));
        range.select().createTextRange();
        document.execCommand("Copy");
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.selectNode(document.getElementById(serviceID));
        window.getSelection().addRange(range);
        document.execCommand("Copy");
    }
    document.getElementById(serviceID).style.display = 'none';
})

Answer 1

What I did was use rails to add an ID to the onclick

CopyToClipboard2(<%=f.id %>)

Then use that to tell the JS what ID to target

<script type="text/javascript">
function CopyToClipboard2(clicked_id) {
    document.getElementById(clicked_id).style.display = 'block';
    document.getElementById(clicked_id).focus();
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(clicked_id));
        range.select().createTextRange();
        document.execCommand("Copy");
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.selectNode(document.getElementById(clicked_id));
        window.getSelection().addRange(range);
        document.execCommand("Copy");
    }
    document.getElementById(clicked_id).style.display = 'none';
}

Works a treat :)