複数のレコードでクリップボードにテキストをコピーしていない

Question

上記の画像は、私がやろうとしていることです。ユーザがボタンをクリックしたときにipを必要としますが、

@foreach ($name as $card) 
    <li class="list-group-item"><span id="copy2">{{ $card->vhackIP }}</span> | {{ $card->name }} | {{ $card->description }} 
     <button class="btn btn-success btn-xs" data-clipboard-target="#copy2">Copy IP</button> 
    </li> 
@endforeach 

毎回：私はボタンの隣にあるIPをコピーしたいのに対し、各IPとassosciatedボタンで、唯一第一IPは

はここに私のコードです.....をコピーされます最初のIPだけがコピーされます....誰かが私を助けたり、それを実現させる別の方法を教えてくれたら、私はappそれをreciate ....ありがとう。

Answer 1

$cardではハードコードされていて動的ではないため、この問題は<button>の<span id="copy2">とdata-clipboard-targetのようです。 idとdata-clipboard-targetの値は、リスト全体で同じです。次のような方法を試してみてください。

@foreach ($name as $card) 
    <li class="list-group-item"><span id="copy{{ $card->id }}">{{ $card->vhackIP }}</span> | {{ $card->name }} | {{ $card->description }} 
     <button class="btn btn-success btn-xs" data-clipboard-target="#copy{{ $card->id }}">Copy IP</button> 
    </li> 
@endforeach