javascript — может получить копию в буфер обмена только при втором нажатии

Что я делаю

я использую clipboard.js скопировать URL в буфер обмена.

Итак, я начну с рендеринга HTML в PHP. Код выглядит примерно так:

$copyToClipboard = "copyToClipboard(".$id.");";
echo "<a id='get-link-$id' class='small-button get-link' onclick='$copyToClipboard' data-clipboard-text='myText'><u>Get Link</u></a>";

Это сделано в верхней части моей страницы, до того, как мой <script> тег.

Вот что у меня ниже в моем сценарии:

new Clipboard(".get-link"); // initialize clipboard elements
$(function() {
new Clipboard(".get-link"); // initialize clipboard elements
});

function copyToClipboard(id) {
new Clipboard(".get-link");
new Clipboard("#get-link-" + id);
$("#get-link-" + id).text("Copied!");
setTimeout(function(){ $("#get-link-" + id).text("Get Link"); }, 2000);
}

Я был излишним использованием new Clipboard(".get-link"); в попытке заставить его работать.

Все, что делает этот код, это копирует ссылку в буфер обмена, затем изменяет текст на 2 секунды, а затем снова изменяет его.

Эта проблема

Ссылка на буфер обмена копируется только после второй нажми на a тег. Я не могу понять, почему.

редактировать

По какой-то причине это JS Fiddle показывает мой код работает. Не уверен, почему это не работает на моем сайте.