JS Kopyalama Butonu Sorunu

Arkadaşlar merhaba, ben textarea içerisinde ki verileri kopyalatmak istiyorum buton işlemini felan hallettim yalnız alt alta 3-4 tane textarea olduğunda hep 1. textin içini kopyalıyor. Bunu nasıl çözebilirim.

VERİYİ ÇEKTİRDİĞİM TEXTAREA KODU:

<td><textarea class="form-control" id="metin">'.$bilgi["kadi"].'</textarea></td>

BUTONUN KODU:

<td><button onclick="kopyala()" class="btn btn-primary">Kopyala</button> </td>

JS KODu:


<script language="Javascript">

function kopyala(){
var text = document.getElementById("metin");
text.select();
document.execCommand("copy");
}
</script>

SORUNUN GÖRÜNTÜSÜNÜ BU ŞEKİLDE BIRAKTIM. 3. KOPYALAMA BUTONUNADA TIKLASAM 1. VERİYİ KOPYALIYOR 2. BUTONADA TIKLASAM 1. VERİYİ ALIYOR.

Selam. Hepsine aynı id yi vermişsin ve bütün butonların “metin” id sine bakıyor.

İdl'eri ayarla.
Fonksiyon ile değişken gönder, örneğin textarea id'sini. Buton onclick kodunu kopyala(metin1) - kopyala(metin2) - kopyala(metin3) yaparsın, script ile bunu algılatırsın.
metin1 yerine this koymak daha iyi olur ama sadece 3 buton ise gerek yok. Sorun olursa akşam eve geçince kod atarım.
Kolay gelsin.

Öncelikle aşağıdaki şekilde textarealar için bir class ve butonlar için bir class tanımlayınız, Sonra tüm butonlardan onclick değerini kaldırın gerek yok

VERİYİ ÇEKTİRDİĞİM TEXTAREA KODU:

Örnek textarea:
<textarea class="form-control text_area_class">hello</textarea>

Örnek buton:
<button class="btn btn-primary buton_class">Kopyala</button>

Javascript Kodları:

            document.querySelectorAll('.buton_class').forEach(function(v,i){
                            v.addEventListener('click',function(e){
                                            let text = Array.from(document.querySelectorAll('.text_area_class'))[i];
                                            text.select();
                                            document.execCommand("copy");
                                        })
                        });

Tabi js koları sayfanın altında yer almalı