Javascript-使用nextElementSibling

Question

在我的应用中将复制添加到剪贴板功能中，clipboard建议您使用data-clipboard-target定位要复制元素的id。

因为我通过遍历Job记录来创建下面的列表，所以所有元素都使用相同的id（#bar）。

如何使剪贴板功能更强大以遍历不同的列表项并从href中选择job.url？我尝试使用nextElementSibling，但没有运气。

index.html.haml

- jobs.each do |job|
  %li
    %button{class: 'clipboard-btn', "data-clipboard-action": "copy", "data-clipboard-target": "#bar"}
      = image_tag('link.svg')
    .source
      = link_to "(" + uri_parse(job.url) + ")", job.url, id: 'bar'

application.js

new Clipboard(".clipboard-btn", {
    text: function(trigger) {
      const query = trigger.getAttribute('data-clipboard-target');
      const target = document.querySelector(query);
      return target.getAttribute('href');
    }
  })