Javascript 从输入中复制文本按钮

我有多张唱片。每个记录都有一个定义了唯一文本的输入，并使用按钮将此文本复制到剪贴板。只要我只有一张唱片，一切都很好。如果有多条记录，则只有第一条记录有效。我需要帮助，使它与许多输入和按钮，任何建议工作？另一个问题是是否可以隐藏输入（type='hidden'）。我试过了，但似乎不起作用

我的HTML：

<input  id='1' class="js-copytextarea" value='Sample Text to Copy 1 '>
<button  class="js-textareacopybtn" data-id="1">COPY</button>
<br>    
<input  id='2' class="js-copytextarea" value='Sample Text to Copy 2 '>
<button class="js-textareacopybtn" data-id="2">COPY</button>

链接到JSFIDLE:

---

仅选择一个元素，如果要使用给定的类来选择所有元素，那么请遍历集合并将事件处理程序绑定到它们。

如我所见，您已经将jQuery库附加到了代码中。因此，您可以使用jQuery使其更简单

$（'.js textareacopybtn'）。在（'click'，函数（事件）{
var copyTextarea=$（this）.data（'id'）；
$（'#'+copyTextarea）[0]。选择（）；
试一试{
var successful=document.execCommand（'copy'）；
var msg=successful？'successful'：'successful'；
log（'复制文本命令为'+msg'）；
}捕捉（错误）{
log（'Oops，无法复制'）；
}
});

复制


复制
多亏了@Mojtaba，我解决了部分Javascript问题。我还设法用CSS隐藏输入。我想我应该使用zClip，但现在CSS快捷方式对我来说很有效

只需将类添加到输入（.input noshow）

CSS:

好的，我唯一的问题就是让它与隐藏输入一起工作。嗯，谢谢你的帮助，但是我已经测试过了，它不起作用（）我尝试过用css隐藏输入，也没有成功@尼塔，祝你好运，伙计；）
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
    var elem = $(this), selectedinput = elem.attr('data-id'); 
  console.log(selectedinput);
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

.input-noshow {
    background-color: transparent;
    border: 0px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width:5px;
    color:transparent;
    cursor:default;
}
.input-noshow::selection {
  background: transparent;
}
.input-noshow::-moz-selection {
  background: transparent;