как сделать мультиселектор или мультиидентификатор для копирования в буфер обмена

Question

Мне очень нравится иметь копию в буфере обмена на моем сайте, вот пример, который мне интересен.

(function() {

    "use strict";

    function copyToClipboard(elem) {

        var target = elem;

        // select the content
        var currentFocus = document.activeElement;

        target.focus();
        target.setSelectionRange(0, target.value.length);
        // copy the selection
        var succeed;

        try {
            succeed = document.execCommand("copy");
        } catch (e) {
            console.warn(e);
            succeed = false;
        }
        // Restore original focus
        if (currentFocus && typeof currentFocus.focus === "function") {
            currentFocus.focus();
        }

        if (succeed) {
            $(".copied").animate({
                top: -25,
                opacity: 0
            }, 700, function() {
                $(this).css({
                    top: 0,
                    opacity: 1
                });
            });
        }
        return succeed;
    }

    $("#copyButton, #copyTarget").on("click", function() {

        copyToClipboard(document.getElementById("copyTarget"));
    });
}());

Вот кодовая ручка https://codepen.io/LattyS/pen/QvGyKL

Но у меня есть 2 проблемы с ним

1. при попытке создать более 1 ссылки, если я нажму любую из них, все они скопированы вместе.
2. как тоже можно создать DIV

Так что мне нужно сделать более 10 ссылок одновременно, и есть ли возможность использовать копию в буфере обмена с DIV тоже или нет с тем же проектом? как этот на изображении https://gulfupload.com/i/00025/fq8kg0ef7gw6.png ...... Прошу прощения за плохой английский, но я хочу, чтобы вы мне помогли. спасибо заранее

Answer 1

(function () {

    "use strict";

    function copyToClipboard(elem) {

        var target = elem;

        // select the content
        var currentFocus = document.activeElement;

        target.focus();
        target.setSelectionRange(0, target.value.length);

        // copy the selection
        var succeed;

        try {

            succeed = document.execCommand("copy");
        } catch (e) {

            console.warn(e);

            succeed = false;
        }

        // Restore original focus
        if (currentFocus && typeof currentFocus.focus === "function") {

            currentFocus.focus();
        }

        if (succeed) {

            $(target).closest('.input-group').find('.copied').animate({top: -25, opacity: 0}, 700, function () {

                $(this).css({top: 0, opacity: 1});
            });
        }

        return succeed;
    }


    $(".copyButton").on("click", function () {

        var parent = $(this).closest('.input-group');

        copyToClipboard(parent.find(".copyTarget")[0]);
    });
}());

Ссылка Codepen для копирования одной ссылки за раз из нескольких ссылок: https://codepen.io/anon/pen/ELXWaG