I have an HTML page with 3 tables on it. I want to be able to copy specific cells in a table row to the clipboard. The row could come from any of the 3 tables.

Using the code below, I highlight and copy the row for a table with an ID of "final". How do I make this work for any of the 3 tables? I tried by getElementsByTagName and labeling them the same name but did not work - understandably so. Is there a way to designate the selected table? I am trying to avoid copying the whole row and might eventually add the formatted msg to a new page rather than copy to the clipboard.

function copy_highlight_row() {
    var table = document.getElementById('final');
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        // Take each cell
        var cell = cells[i];
        // do something on onclick event for cell
        cell.onclick = function () {
            // Get the row id where the cell exists
                
            var rowId = this.parentNode.rowIndex;
            var rowsNotSelected = table.getElementsByTagName('tr');
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.className += " selected";
            var cellId = this.cellIndex + 1

            msg = 'Title: ' + rowSelected.cells[0].innerHTML;
            msg += '\r\nDescription: ' + rowSelected.cells[1].innerHTML;
            msg += '\n\nLink: ' + rowSelected.cells[2].innerHTML;
            msg += '\nPublication Date: ' + rowSelected.cells[3].innerHTML;
            //msg += '\nThe cell value is: ' + this.innerHTML copies cell selected
            navigator.clipboard.writeText(msg);
            
        }
    }

};