用于将两个不同字段复制到剪贴板的两个按钮

Question

I have two fields with input text, there is a copy to clipboard button for each, copying works but copies the same text:

    <div class="class="mov-label">
        <i class="mov-label"></i> <b>Link first</b>
    </div>
    <input type="text" value="[xfvalue_link]" id="myInput" readonly>
    <div class="fb-submit flex-row-2"><button onclick="myFunction()">Copy link</button>
        <form>
            <input type="button" onclick="window.location.href = '[xfvalue_link]';" value="Open in application"/>
        </form>
    </div>
    <br>
    <div class="class="mov-label">
        <i class="mov-label"></i> <b>Link second</b>
    </div>
    <input type="text" value="[xfvalue_link-2]" id="myInput" readonly>
    <div class="fb-submit flex-row-2"><button onclick="myFunction()">Copy link</button>
        <form>
            <input type="button" onclick="window.location.href = '[xfvalue_link-2]';" value="Open in application"/>
        </form>
    </div>

and JS

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied: " + copyText.value);
}
</script>

Answer 1

You are using same id for both the textboxes - myInput . Assign unique id for each textbox and pass them in myFunction().

<input type="text" value="[xfvalue_link]" id="myInput1" readonly>
<button onclick="myFunction('myInput1')">
<input type="text" value="[xfvalue_link-2]" id="myInput2" readonly>
<button onclick="myFunction('myInput2')">

function myFunction(myID){
   var copyText = document.getElementById(myID);
}

Answer 2

This is solution:

<div class="class="mov-label">
    <i class="mov-label"></i> <b>Link first</b>
</div>
<input type="text" value="[xfvalue_link]" id="myInput" readonly>
<div class="fb-submit flex-row-2"><button onclick="myFunction()">Copy link</button>
    <form>
        <input type="button" onclick="window.location.href = '[xfvalue_link]';" value="Open in application"/>
    </form>
</div>
<br>
<div class="class="mov-label">
    <i class="mov-label"></i> <b>Link second</b>
</div>
<input type="text" value="[xfvalue_link-2]" id="myInput1" readonly>
<div class="fb-submit flex-row-2"><button onclick="myFunction1()">Copy link</button>
    <form>
        <input type="button" onclick="window.location.href = '[xfvalue_link-2]';" value="Open in application"/>
    </form>
</div>

and JS

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied: " + copyText.value);
}
</script>
<script>
function myFunction1() {
  var copyText = document.getElementById("myInput1");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied: " + copyText.value);
}
</script>

Maybe someone will be useful