I'm making a website that's getting data from a database and putting it on a table with a button that should be able to copy the contents or a tag. I'm using Laravel by the way.
Here's my code...
HTML
<table class="table table-sm">
<thead style="font-size: 12px;">
<tr>
<th scope="col">#</th>
<th scope="col">Query</th>
<th scope="col">Created at</th>
<th scope="col">Copy</th>
</tr>
</thead>
<tbody>
@if(!$history_list->isEmpty())
<p class="d-none">{{$i = 1}}</p>
@foreach($history_list as $hl)
<tr>
<th scope="row">{{ $i++ }}</th>
<td><textarea rows="8" class="querystr d-none">{{ $hl->query_text }}</textarea>{{ $hl->query_text }}</td>
<td>{{ $hl->created_at }}</td>
<td><button class="btn btn-primary btn-sm copybtn" style="font-size: 12px"><span class="oi oi-clipboard" title="copy" aria-hidden="true"></span> Copy</button></td></td>
</tr>
@endforeach
@else
<tr>
<th scope="row" colspan="4">You have no queries in your history.</th>
</tr>
@endif
</tbody>
</table>
JQuery... i think
var copyQueryBtn = document.querySelector('.copybtn');
copyQueryBtn.addEventListener('click', function(event) {
var copyQuery = document.querySelector('.querystr');
copyQuery.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
EDIT: I need it to work dynamically because I'm getting table data from my database, and I also updated the code that is close to this question, and it's still can't copy and it doesn't work on other row, I know because I used the console error messages.