Copy text field dynamically with javascript-CodePudding

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 >
    <input type="number"  name="amount">
</div>
<div >
    <input type="text"  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" >Deposit</button>
<a href="javascript:void(0)"  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>

CodePudding user response：

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 >
    <input type="number"  name="amount">
</div>
<div >
    <input type="text"  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" >Deposit</button>

<!-- Changed the onClick-Event to provide the Name as fixed parameter -->
<a href="javascript:void(0)"  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>