将Javascript复制按钮限制为单个DIV/Text区域

我正在创建一个在文本字段中包含各种脚本的网页，我的团队只需单击一个按钮即可复制文本字段中的内容，这样他们就可以将其粘贴到设备中以运行脚本。但是，由于javascript运行HTML代码中的最后一个脚本，所以按钮都按照最后一个脚本所说的做。我需要把它们限制在按钮所在的分区。我添加了一个屏幕截图来显示它的外观，但我希望有一种方法可以做到这一点

我给了每个文本区域一个名称，脚本特别声明调用该ID，但当我单击按钮时，它将只复制第三个DIV的字段

IAD配置-仅限2400s
IAD配置
复制
var输入=document.getElementById（“iad”）；
var按钮=document.getElementById（“iadcopy”）；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
input.select（）；
文件。执行命令（“副本”）；
});
国际计算语言学协会
ACL脚本
复制
var输入=document.getElementById（“acl”）；
var button=document.getElementById（“aclcopy”）；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
input.select（）；
文件。执行命令（“副本”）；
});
NOC用户名
ACL脚本
复制
var输入=document.getElementById（“noc”）；
var按钮=document.getElementById（“nocopy”）；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
input.select（）；
文件。执行命令（“副本”）；
});

您使用内联javascript覆盖了

输入的内容（这通常是个坏主意）。通过使它们成为唯一的变量名，它复制了正确的变量名。以一种更为编程的方式重构它可能是一个好主意，使用jQuery选择要复制的最近的textarea，或者为每一对指定相同的类名，以便正确地确定目标的范围

注意-由于您在声明（并重新声明
按钮
）后立即添加事件侦听器，虽然您的方法不是最好的，但它不会遇到与重新声明
输入
相同的问题



IAD配置-仅限2400s
IAD配置
复制
var input1=document.getElementById（“iad”）；
var按钮=document.getElementById（“iadcopy”）；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
input1.select（）；
文件。执行命令（“副本”）；
});
国际计算语言学协会
ACL脚本
复制
var input2=document.getElementById（“acl”）；
var button=document.getElementById（“aclcopy”）；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
input2.select（）；
文件。执行命令（“副本”）；
});
NOC用户名
ACL脚本
复制
var输入=document.getElementById（“noc”）；
var按钮=document.getElementById（“nocopy”）；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
input.select（）；
文件。执行命令（“副本”）；
});
谢谢！我知道这不是一个典型的或最佳的做法，但这是什么挂了我。
    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>IAD Config - 2400s ONLY</b>
        </div>

        <div class="panel-body">
         <textarea id="iad" rows="5">
          IAD Config
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="iadcopy">Copy</button>
          <script>
             var input  = document.getElementById("iad");
             var button = document.getElementById("iadcopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>ACL</b>
        </div>

        <div class="panel-body">
         <textarea id="acl" rows="5">
          ACL script
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="aclcopy">Copy</button>
          <script>
             var input  = document.getElementById("acl");
             var button = document.getElementById("aclcopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>NOC Username</b>
        </div>

        <div class="panel-body">
         <textarea id="noc" rows="5">
          ACL script
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="noccopy">Copy</button>
          <script>
             var input  = document.getElementById("noc");
             var button = document.getElementById("noccopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>