На страницу выведены картинки из папки img возле каждой картинки есть прямая ее ссылка - необходимо сделать кнопку скопировать для посетителя, чтобы по клику копировалась ссылка. Проблема заключается в том что кнопка работает только для первой картинки - на идущие следом либо не работает совсем, либо копирует текст из первой.
Вот такой код:
<?php
$path = $_SERVER['DOCUMENT_ROOT'] . '/img/';
$images = scandir($path);
if (false !== $images) {
$images = preg_grep('/\\.(?:gif|png|jpe?g)$/', $images);
foreach ($images as $image)
echo '<img class="" src="/img/', htmlspecialchars(urlencode($image)),'" />
<button class="" id="userButton">Копировать</button>
<center><textarea id="copy" class="">ссылка для копирования</textarea></center>
';
}
?>
<script>
var button = document.getElementById('userButton');
button.addEventListener('click', function () {
var ta = document.getElementById('copy');
var range = document.createRange();
range.selectNode(ta);
window.getSelection().addRange(range);
try {
document.execCommand('copy');
} catch(err) {
console.log('Can`t copy, boss');
}
window.getSelection().removeAllRanges();
});
<script>
