在for循环中使用时如何为按钮标签提供动态ID

Question

When I execute below code, it will get a list of items from backend and for each item I will generate buttons, I want to call the copy-link-message when the user clicks the content_copy button but in my code it's working only for top button. How can I apply the copy-link-message for each button created?

Function:

function append_files_to_list(path, files) {
  var $list = $("#list");
  var is_lastpage_loaded = null === $list.data("nextPageToken");
  var is_firstpage = "0" == $list.data("curPageIndex");
  html = "";
  let targetFiles = [];
  for (i in files) {
    var item = files[i];
    var p = path + encodeURIComponent(item.name).replaceAll("%5C", "%5C%5C").replace(/[!'()*]/g, escape) + "/";     // Adding folder name to url 
    if (item.size == undefined) {
      item.size = "";
    }
    item.modifiedTime = utc2local(item.modifiedTime);
    item.size = formatFileSize(item.size);
    if (item.mimeType == "application/vnd.google-apps.folder") {
      html += `<li class="mdui-list-item mdui-ripple"><a href="${p}" class="folder">
                <div class="mdui-col-xs-12 mdui-col-sm-7 mdui-text-truncate" title="${item.name}">
                <i class="mdui-icon material-icons">folder_open</i>
                  ${item.name}
                </div>
                <div class="mdui-col-sm-3 mdui-text-right">${item["modifiedTime"]}</div>
                <div class="mdui-col-sm-2 mdui-text-right">${item["size"]}</div>
                </a>
              <div class="mdui-col-sm-2 mdui-text-right dummyclass">
                  <button onclick="window.open('${p}','_blank')" class="mdui-textfield-icon mdui-btn mdui-btn-icon dummyclass" style="float: right;">
                  <i class="mdui-icon material-icons dummyclass">launch</i>
                </button>
                <button id="copy-link-message" onclick="(function setClipboard(value) {var tempInput = document.createElement('input');tempInput.style = 'position: absolute; left: -1000px; top: -1000px';tempInput.value = value;document.body.appendChild(tempInput);tempInput.select();document.execCommand('copy');document.body.removeChild(tempInput);})(window.location.protocol + '//' + window.location.hostname + '${p}')" class="mdui-textfield-icon mdui-btn mdui-btn-icon dummyclass" style="float: right;">
                  <i class="mdui-icon material-icons dummyclass">content_copy</i>
                </button>
              </div>
            </li>`;
    } else {
      var p = path + encodeURIComponent(item.name).replaceAll("%5C", "%5C%5C").replace(/[!'()*]/g, escape); // Adding file name to url
      var ddl_link = p;
      const filepath = path + item.name;
      var c = "file";
      if (is_lastpage_loaded && item.name == "README.md" && !UI.hide_readme_md) {
        get_file(p, item, function (data) {
          markdown("#readme_md", data);
        });
      }
      if (item.name == "HEAD.md" && !UI.hide_head_md) {
        get_file(p, item, function (data) {
          markdown("#head_md", data);
        });
      }
      var ext = p.split(".").pop().toLowerCase();
      if (
        "|html|php|css|go|java|js|json|txt|sh|md|mp4|webm|avi|bmp|jpg|jpeg|png|gif|m4a|mp3|flac|wav|ogg|mpg|mpeg|mkv|rm|rmvb|mov|wmv|asf|ts|flv|pdf|".indexOf(
          `|${ext}|`
        ) >= 0
      ) {
        targetFiles.push(filepath);
        p += "?a=view";
        c += " view";
      }
      if (item["size"] === ""){
        item["size"] = "— — —";
      }
      html += `<li class="mdui-list-item file mdui-ripple" target="_blank"><a gd-type="${item.mimeType}" href="${p}" class="${c}">
              <div class="mdui-col-xs-12 mdui-col-sm-7 mdui-text-truncate" title="${item.name}">
              <i class="mdui-icon material-icons">insert_drive_file</i>
                ${item.name}
              </div>
              <div class="mdui-col-sm-3 mdui-text-right">${item["modifiedTime"]}</div>
              <div class="mdui-col-sm-2 mdui-text-right">${item["size"]}</div>
              </a>
            <div class="mdui-col-sm-2 mdui-text-right dummyclass">
                <button onclick="window.open('${ddl_link}','_self')" class="mdui-textfield-icon mdui-btn mdui-btn-icon dummyclass" style="float: right;">
                <i class="mdui-icon material-icons dummyclass">file_download</i>
              </button>
              <button onclick="window.open('${p}','_blank')" class="mdui-textfield-icon mdui-btn mdui-btn-icon dummyclass" style="float: right;">
                <i class="mdui-icon material-icons dummyclass">launch</i>
              </button>
              <button id="copy-link-message" onclick="(function setClipboard(value) {var tempInput = document.createElement('input');tempInput.style = 'position: absolute; left: -1000px; top: -1000px';tempInput.value = value;document.body.appendChild(tempInput);tempInput.select();document.execCommand('copy');document.body.removeChild(tempInput);})(window.location.protocol + '//' + window.location.hostname + '${ddl_link}')" class="mdui-textfield-icon mdui-btn mdui-btn-icon dummyclass" style="float: right;">
                <i class="mdui-icon material-icons dummyclass">content_copy</i>
              </button>
            </div>
          </li>`;
    }
  }
  if (targetFiles.length > 0) {
    let old = localStorage.getItem(path);
    let new_children = targetFiles;
    if (!is_firstpage && old) {
      let old_children;
      try {
        old_children = JSON.parse(old);
        if (!Array.isArray(old_children)) {
          old_children = [];
        }
      } catch (e) {
        old_children = [];
      }
      new_children = old_children.concat(targetFiles);
    }
    localStorage.setItem(path, JSON.stringify(new_children));
  }
  $list.html(($list.data("curPageIndex") == "0" ? "" : $list.html()) + html);
  if (is_lastpage_loaded) {
    $("#count")
      .removeClass("mdui-hidden")
      .find(".number")
      .text($list.find("li.mdui-list-item").length);
  }
  $("#copy-link-message").on("click", () => {
      mdui.snackbar("Copied to clipboard!");
  });
}

Answer 1

Use $(selector).attr(attribute, value)

for example $('button').attr('id', 'primary-btn')