Jquery Clipboard.js单击一个按钮即可复制多个元素

这是一个新问题，但与此相关。简而言之，我现在能够将生成表中的单元格复制到剪贴板。我现在想做的是使用相同的按钮向剪贴板添加更多文本。我已经尝试使用命令式API作为建议，但我仍然只能复制原始目标。如何使用clipboard.js通过单击一个按钮复制多个元素

到目前为止，我的代码是：

<script>
var place_id = ''; //addme
var startDate = '{{request.GET.start_date}}';//addmee
var endDate = '{{request.GET.end_date}}';//addmee

var clipboard = new Clipboard('.cp_btn',{
    text: function(trigger) {
        var toCopy = document.querySelector('#toCopy').value;
        var dateCopy = document.querySelector('#dateCopy').value;
        var errorCopy = document.querySelector('#errorCopy').value;
        return toCopy + dateCopy + errorCopy;
    }
});

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

$(function() {

    var start = moment(startDate);
    var end = moment(endDate);

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        init();
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});

function clearString(str){
   var str = str.replace(/\"/g, "");
   return str;
  }
  function csvToTable(myReturn){
    var cellToCopyIndex = 0;
    var allRows = myReturn.split(/\r?\n|\r/);
    var table = '<table class="tablesorter">';
    for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
      if (singleRow === 0) {
        table += '<thead>';
        table += '<tr>';
      } else {
        table += '<tr>';
      }
      var rowCells = allRows[singleRow].split(',');
      for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
        if (singleRow === 0) {
          table += '<th style="padding: 15px;">';
          table += clearString(rowCells[rowCell]);
          table += '</th>';
        } else {
          table += '<td>';
          if(rowCell==cellToCopyIndex){
            table += '<input type="text" id="toCopy_'+singleRow+'" value="'+clearString(rowCells[rowCell])+'" readonly>';
          }else {
              table += clearString(rowCells[rowCell]);
          }
          table += '</td>';
        }
      }
      if (singleRow === 0) {
        table += '</tr>';
        table += '</thead>';
        table += '<tbody>';
      } else {
        table += '<td>' +
            '<button class="cb_btn" data-clipboard-target="#toCopy_'+singleRow+'"' +
            'style="color:#60B7BA;\n' +
            '    font-size: 20px;\n' +
            '    margin-top: 0;\n' +
            '    padding-top: 11px;">View Logs';
        table += '</button></td>';
        table += '</tr>';
      }
    }
    table += '</tbody>';
    table += '</table>';
    return table;
  }
  function showLogData(name, domElement, csv){
    csv = csv || false;

    var selStatus = jQuery('#txtselstatus').val();
    jQuery('#returndatalog').css('display', 'none');
    if (selStatus == "")
    {
      alert("Please enter status")
      jQuery('#txtselstatus').focus();
    }else
    {
      jQuery(domElement).html("<img src='/static/img/loader.gif'/>");
      jQuery.ajax({
        type: "POST",
        url: '/ajax/generatelogdata',
        dataType: 'json',
        data: {
            "chkstatus":"",
            'place_id': place_id,
            'queryname': name,
            'startDate': $("#reportrange").data('daterangepicker').startDate.format("YYYY-MM-DD"),
            'endDate': $("#reportrange").data('daterangepicker').endDate.format("YYYY-MM-DD")
        },
        success: function(response){
          ///console.log(response)
           jQuery('#returndatalog').css('display', 'block');

          if(typeof response =='object')
          {
            var myReturn = response.response;
            if (csv) {
                jQuery(domElement).html(csvToTable(myReturn));
                jQuery(domElement + " table").tablesorter();
                new Clipboard('.cb_btn');
            }
            else {
                jQuery(domElement).html(response.response.replace(/\"/g,""));
            }
          }
          if(response.error){

          }
          else{

          }
        },
        error:function(response){

        }
      });
    }
  }

function init() {
    showLogData('globallogs_places', '#returngloballogsplaces', true);
}
</script>

var place_id=“”//地址
var startDate='{{request.GET.start_date}}'//阿德米
var endDate='{{request.GET.end_date}}'//阿德米
var clipboard=新剪贴板（'.cp_btn'{
文本：函数（触发器）{
var toCopy=document.querySelector（'#toCopy'）.value；
var dateCopy=document.querySelector（“#dateCopy”）.value；
var errorCopy=document.querySelector（'#errorCopy'）.value；
返回复制+日期复制+错误复制；
}
});
剪贴板上的（'success'，函数（e）{
console.info（'Action:'，e.Action）；
console.info（'Text:'，e.Text）；
console.info（'Trigger:'，例如Trigger）；
e、 选举（）；
});
剪贴板.on（'error'，函数（e）{
console.error（'Action:'，e.Action）；
console.error（'Trigger:'，e.Trigger）；
});
$（函数（）{
var开始=力矩（起始日期）；
var end=力矩（endDate）；
功能cb（开始、结束）{
$（'#reportrange span'）.html（start.format（'MMMM D，YYYY'）+'-'+end.format（'MMMM D，YYYY'））；
init（）；
}
$（“#reportrange”）.daterangepicker({
开始日期：开始，
完日期:完，
范围：{
“今天”：[时刻（），时刻（）]，
“昨天”：[moment（）.subtract（1，'天'），moment（）.subtract（1，'天'）]，
“过去7天”：[力矩（）.减去（6，'天'），力矩（）]，
“过去30天”：[力矩（）.减去（29，'天'），力矩（）]，
“本月”：[moment（）.startOf（'Month'），moment（）.endOf（'Month'），
‘上个月’：[moment（）.subtract（1，'Month'）.startOf（'Month'），moment（）.subtract（1，'Month'）.endOf（'Month'）]
}
}，cb）；
cb（开始、结束）；
});
函数clearString（str）{
var str=str.replace（/\“/g，”）；
返回str；
}
函数csvToTable（myReturn）{
var-cellToCopyIndex=0；
var allRows=myReturn.split（/\r？\n |\r/）；
var表=“”；
对于（var singleRow=0；singleRow

html:

{%block css\u includes%}
{%endblock%}
{%block js_includes%}
{%endblock%}
{%block body%}


选择一个日期




错误：










{%endblock%}

{% block css_includes %}
<link rel="stylesheet" href="/static/css/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="/static/css/tablesorter/style.css?rand=1" type="text/css" /> <!--addme -->
{% endblock %}
{% block js_includes %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/static/js/admin_stats.js?v={{version}}"></script>
<script src="/static/js/jquery-ui.js" type="text/javascript"></script>
<script  type="text/javascript"  src="/static/js/admin.js?v={{version}}"></script>
<script src="/static/js/handlebars.min-v1.1.2.js" type="text/javascript"></script>
<script  type="text/javascript"  src="/static/js/clipboard.min.js"></script><!--addme-->
<!-- datepicker add -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script  type="text/javascript"  src="/static/js/jq.tablesorter.js"></script><!--addme -->
<!--<script  type="text/javascript"  src="/static/js/logs.js?rand=9"></script><!--addme -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
{% endblock %}
{% block body %}
<br>
<h3>Select a Date</h3>
<br>
<div id="reportrange" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 23%">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
    <span></span> <b class="caret"></b>
</div>
<br>
<h3>Errors:</h3>
<br>
<br>
<div id="returngloballogsplaces" align="left"></div>
<div>
<input type="hidden" id="dateCopy" data-clipboard-target="{{request.GET.end_date}}" value="{{request.GET.end_date}}" >
</div>
<div>
<input type="hidden" id="errorCopy" data-clipboard-target="httpRequest.status>=300 httpRequest.status<=499" value="httpRequest.status>=300 httpRequest.status<=499" >
</div>
<br>
<br>
<br>
{% endblock %}