按钮 ID 作为 getElementById

// defining the function along with an argument that represents
// the element that was clicked:
function f001(_elem) {

  // here we use the HTMLElement.id property to retrieve the
  // value of the 'id' attribute/property of the clicked
  // element and use parseInt() - along with the radix of 10 -
  // to convert that id into a number:
  var integer = parseInt(_elem.id, 10),
      // here we use document.getElementById() to find the
      // element with an id equal to the integer after it's
      // been incremented by 1:
      copyText = document.getElementById(++integer);

  // we select the entered value from that identified
  // element:
  copyText.select();

  // and execute the 'copy' action to assign the content
  // to the clipboard:
  document.execCommand("copy");
}

<div>
  <!-- here we add the 'this' keyword to the function-call,
       this will be accessed in the function in order to
       retrieve the necessary properties of the element. We
       could pass 'this.id' to get direct access to the
       element's id, but that approach may limit us in future.  -->
  <button id="10" onclick="f001(this)">C</button>
  <textarea id="11" rows="1" cols="25">Test123 </textarea>

  <button id="15" onclick="f001(this)">C</button>
  <textarea id="16" rows="1" cols="25">Test456 </textarea>
</div>

<!-- a generic <textarea> into which the clipboard content
     may be pasted in order to demonstrate the success of
     the earlier function: -->
<div>
  <textarea placeholder="paste copied content here to check."></textarea>
</div>

// defining the function along with a meaningful name, also takes an
// argument passed automatically from the later use of
// EventTarget.addEventListener():
const copyText = function(evt) {

    // from the Event Object passed in from EventTarget.addEventListener()
    // we retrieve the Event.currentTarget element, which is the element
    // to which the function is bound as the event-handler (Event.target
    // could be used instead, currently, unless other HTML elements were
    // placed within the <button> for styling purposes):
    var activated = evt.currentTarget,
    
        // we know that the <textarea> is the nextElementSibling, so here
        // we access that property of the HTMLElement:
        textarea = activated.nextElementSibling;

    // we select the entered-value:
    textarea.select();
    // we copy the entered-value to the clipboard:
    document.execCommand("copy");
  },
  
  // we find the <button> elements in the document:
  buttons = document.querySelectorAll('button');

// we use NodeList.prototype.forEach() to iterate over the
// NodeList, using an Arrow function inside:
buttons.forEach(
  // here 'btn' is a reference to the current Node of the
  // NodeList over which we're iterating, and we use the
  // EventTarget.addEventListener() method to bind the
  // named - copyText() function, but note the deliberate
  // lack of parentheses - as the 'click' event-handler:
  (btn) => btn.addEventListener('click', copyText)
)

<div>
  <button>C</button>
  <textarea>Test123 </textarea>

  <button>C</button>
  <textarea>Test456 </textarea>
</div>

<!-- a generic <textarea> into which the clipboard content
     may be pasted in order to demonstrate the success of
     the earlier function: -->
<div>
  <textarea placeholder="paste copied content here to check."></textarea>
</div>

// defining the function along with a meaningful name, also takes an
// argument passed automatically from the later use of
// EventTarget.addEventListener():
const copyText = function(evt) {

    // from the Event Object passed in from EventTarget.addEventListener()
    // we retrieve the Event.currentTarget element, which is the element
    // to which the function is bound as the event-handler:
    var activated = evt.currentTarget,
    
        // we then use the Element.dataset API to retrieve the attribute-value
        // of the data-copyfrom attribute:
        identifierString = activated.dataset.copyfrom,
        
        // we use a CSS attribute-selector, along with a Template Literal
        // (a String delimited using back-ticks) in which JavaScript can
        // be directly interpolated when wrapped with `${...JavaScript}`:
        textarea = document.querySelector( `[data-identifier=${identifierString}]` );

    // we select the entered-value:
    textarea.select();
    // we copy the entered-value to the clipboard:
    document.execCommand("copy");
  },
  
  // we find the <button> elements in the document with a custom data-copyfrom
  // attribute:
  buttons = document.querySelectorAll('button[data-copyfrom]');

// we use NodeList.prototype.forEach() to iterate over the
// NodeList, using an Arrow function inside:
buttons.forEach(
  // here 'btn' is a reference to the current Node of the
  // NodeList over which we're iterating, and we use the
  // EventTarget.addEventListener() method to bind the
  // named - copyText() function, but note the deliberate
  // lack of parentheses - as the 'click' event-handler:
  (btn) => btn.addEventListener('click', copyText)
)

<div>
  <!-- using data-copyfrom to specify a value by which the
       the relevant <textarea> might be retrieved (this
       could identify a class-name, the element's id or any
       other unique custom data-* attribute-value: -->
  <button data-copyfrom="textareaOne">C</button>
  <!-- here we use the data-identifier custom attribute
       as the attribute, the value of which, will identify
       the relevant element: -->
  <textarea data-identifier="textareaOne">Test123 </textarea>

  <button data-copyfrom="textareaTwo">C</button>
  <textarea data-identifier="textareaTwo">Test456 </textarea>
</div>

<!-- a generic <textarea> into which the clipboard content
     may be pasted in order to demonstrate the success of
     the earlier function: -->
<div>
  <textarea placeholder="paste copied content here to check."></textarea>
</div>

<my-textarea>Hello World!</my-textarea>
<hr>
<my-textarea>Hello Another World!</my-textarea>

<script>
  customElements.define("my-textarea", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { //required because can only READ innerHTML after DOM is ready
        let textarea = document.createElement("textarea");
        let button = document.createElement("button");
        button.innerHTML = "copy me";
        button.id = "foo"; // no id needed, just showing wath duplicate ids do
        button.onclick = (evt) => { // inline event just fine, we're not attaching more
          textarea.select(); // in scope, so no need to search for textarea
          document.execCommand("copy");
          console.log(button.id, window[button.id]); // see difference in FireFox & Chrome
          console.log(document.querySelectorAll("#foo"));
        }
        textarea.innerHTML = this.innerHTML;
        this.innerHTML = "";
        this.append(textarea, button); // learn the difference with appendChild
      })
    }
  })
</script>