title: How to Create dynamic copy button with jquery?
body: <p>I am figuring out the way to create a dynamic multiple copy button without creating an individual function for each copy button. for that, I search google but not find a reliable piece of code.</p>
  
  <p>have a look at what I trying to achieve but I don't know how it will be accomplished because I bit noob to Jquery.</p>
  
  <p>example:</p>
  
  <p><a href="https://i.stack.imgur.com/bbx1w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bbx1w.png" alt="enter image description here"></a></p>
  
  <p>As you can see each <strong>tracking code</strong> have individual <strong>copy button</strong> and each tracking code is dynamically generated from the database with its own copy button. All I want is to find a way to create an individual copy button but don't know how.</p>
  
  <p>Here is a <strong>single value copy button</strong> that I have accomplished so far and the only problem with this snippet is that its only work once because of ID and I don't want to create multiple IDs for an individual function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function copyToClipboard(element) {
        var $temp = $("&lt;input&gt;");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
  }
              </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
  &lt;span id='c1' &gt;&lt;span style="color:#59c053;"&gt;4C3B2&lt;/span&gt;&lt;/span&gt;
   
    &lt;button style="margin-left:5px;float:;" onclick="copyToClipboard('#c1')" type="button" class="btn btn-info btn-xs"&gt;Copy&lt;/button&gt;
    
    &lt;br&gt;
    &lt;textarea rows="4" cols="25" placeholder="paste it here..."&gt;&lt;/textarea&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>