Copy text field dynamically with javascript

Question

I am looping through data using php (laravel/blade) and each loop outputs an HTML section which contains input fields of different values.

I want to be able to copy the value of each input field when i click a button on a particular div, but the javascript code I use to copy the value of the input field just copies the value of one, regardless of which div 's button was clicked

Here is the HTML output of each loop

<form action="{{ route('user.account.deposit') }}" method="post">
@csrf
<p>Please input amount USD worth of {{ Cryptocap::getSingleAsset(strtolower($method->name))->data->symbol }} to
    deposit and send the exact same amount to the wallet address below, before clicking submit.</p>
<div class="input-group">
    <input type="number" class="form-control" name="amount">
</div>
<div class="input-group">
    <input type="text" class="form-control" value="{{ $method->wallet_address }}" id="{{ $method->name }}"
        name="wallet_address" readonly>
</div>
<input type="hidden" value="{{ $method->id }}" name="payment_method_id">
<br>
<button type="submit" class="btn green">Deposit</button>
<a href="javascript:void(0)" class="btn btn-primary btn-xs" onclick="copy()">Copy to Clipboard</a>
<script>
    function copy() {
        /* Get the text field */
        var copyText = document.getElementById("{{ $method->name }}");

        /* Select the text field */
        copyText.select();
        copyText.setSelectionRange(0, 99999); /* For mobile devices */

        /* Copy the text inside the text field */
        navigator.clipboard.writeText(copyText.value);

        /* Alert the copied text */
        alert("Copied the text: " + copyText.value);
    }
</script>

Answer 1

If it is the case, that the whole HTML and JS you posted here, gets outputted for each iteration of your php loop, then the issue lies in the redefinition of the JS copy-Function, as it gets overwritten.

Your solution might be, that you have only one definition for the copy function and providing the specific element name as a parameter.

<form action="{{ route('user.account.deposit') }}" method="post">
@csrf
<p>Please input amount USD worth of {{ Cryptocap::getSingleAsset(strtolower($method->name))->data->symbol }} to
    deposit and send the exact same amount to the wallet address below, before clicking submit.</p>
<div class="input-group">
    <input type="number" class="form-control" name="amount">
</div>
<div class="input-group">
    <input type="text" class="form-control" value="{{ $method->wallet_address }}" id="{{ $method->name }}"
        name="wallet_address" readonly>
</div>
<input type="hidden" value="{{ $method->id }}" name="payment_method_id">
<br>
<button type="submit" class="btn green">Deposit</button>

<!-- Changed the onClick-Event to provide the Name as fixed parameter -->
<a href="javascript:void(0)" class="btn btn-primary btn-xs" onclick="copy({{ $method-name }})">Copy to Clipboard</a>

<!-- Move this section out of the loop and maybe at the bottom of the page -->
<script>
    function copy(inputId) {
        /* Get the text field */

        // Changed to get the Element by the parameter containing the ElementID
        var copyText = document.getElementById(inputId);

        /* Select the text field */
        copyText.select();
        copyText.setSelectionRange(0, 99999); /* For mobile devices */

        /* Copy the text inside the text field */
        navigator.clipboard.writeText(copyText.value);

        /* Alert the copied text */
        alert("Copied the text: " + copyText.value);
    }
</script>