How can I copy to clipboard value of multiple inputs?

Question

I have 3 input fields, and each has different values. I am using clipboardjs CDN to copy input values. The first input value is working to get value. but the second and third input value is not working to copy these values. I am trying to copy input value by these codes.

var clipboard = new ClipboardJS('.btncopy');

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

clipboard.on('error', function(e) {
  console.log(e);
});

.btncopy {
  padding: 2px 8px;
  background: #704b71;
  color: #fff;

}

.form-control {
  margin: 5px;
}

<input id="emos" type="text" class="form-control" value="❤️" style="display: block;">
<span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emos">Copy</span>


<input id="emos" type="text" class="form-control" value="💜💜" style="display: block;">
<span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emos">Copy</span>


<input id="emos" type="text" class="form-control" value="💚💚💚" style="display: block;">
<span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emos">Copy</span>




<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

Answer 1

You are declaring 3 ids with the same name in multiple input tags, where the id should be per tag and unique.

To fix it make input ids unique to the input and change data-clipboard-target accordingly.

var clipboard = new ClipboardJS('.btncopy');

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

    clipboard.on('error', function (e) {
      console.log(e);
    });

.btncopy {
padding: 2px 8px;
background: #704b71;
color: #fff;

}
.form-control{
margin: 5px;
}

<input id="emo1" type="text" class="form-control" value="❤️" style="display: block;">
                    <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emo1">Copy</span>


                    <input id="emo2" type="text" class="form-control" value="💜💜" style="display: block;">
                    <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emo2">Copy</span>


                    <input id="emo3" type="text" class="form-control" value="💚💚💚" style="display: block;">
                    <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emo3">Copy</span>
                    

                    
                    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>