Много разных ссылок для копирования

Question

var ShortCut = document.querySelector('.Copy_Link');
ShortCut.addEventListener('click', function(event)
{
    var ShortCut = document.querySelector('.Copy_Container');
    ShortCut.focus();
    ShortCut.select();
try
{
    var successful = document.execCommand('copy');
    var msg = successful? 'successful': 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
}
catch (err)
{
    console.log('Unsuccessful copying.');
}
});

Это скрипт для копирования одной ссылки из скрытой текстовой области.Я хочу иметь несколько отдельных ссылок на одной и той же странице, но этот скрипт:

var ShortCut = document.querySelectorAll('.Copy_Link1, .Copy_Link2, .Copy_Link3');
ShortCut.addEventListener('click', function(event)
{
    var ShortCut = document.querySelectorAll('.Copy_Container1, .Copy_Container2, .Copy_Container3');
    ShortCut.focus();
    ShortCut.select();
try
{
    var successful = document.execCommand('copy');
    var msg = successful? 'successful': 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
}
catch (err)
{
    console.log('Unsuccessful copying.');
}
});

Failed.

Ссылки:

<SPAN class="Copy_Link1">Copy the shortcut link 1</SPAN>
<TEXTAREA class="Copy_Container1" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 1
</TEXTAREA>

<SPAN class="Copy_Link2">Copy the shortcut link 2</SPAN>
<TEXTAREA class="Copy_Container2" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 2
</TEXTAREA>

<SPAN class="Copy_Link3">Copy the shortcut link 3</SPAN>
<TEXTAREA class="Copy_Container3" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 3
</TEXTAREA>

Я надеюсь, вы понимаете, что яхочу.Я не мог найти даже похожее решение, которое работает в моем конкретном случае, я пробовал несколько методов, но работает только один.Если что-то неясно, не стесняйтесь спрашивать.

Answer 1

Вы можете поместить элемент данных в диапазон, чтобы сообщить ему, какую текстовую область выбрать.

$('.Copy_Link').on('click', function(e){
  var target = document.getElementById(this.dataset.target);
  
  target.focus();
  target.select();
  
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
  } catch (err) {
    console.log('Unsuccessful copying.');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<SPAN class="Copy_Link" data-target="Copy_Container1">Copy the shortcut link 1</SPAN>
<TEXTAREA id="Copy_Container1" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 1
</TEXTAREA>

<SPAN class="Copy_Link" data-target="Copy_Container2">Copy the shortcut link 2</SPAN>
<TEXTAREA id="Copy_Container2" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 2
</TEXTAREA>

<SPAN class="Copy_Link" data-target="Copy_Container3">Copy the shortcut link 3</SPAN>
<TEXTAREA id="Copy_Container3" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 3
</TEXTAREA>