2 клика, чтобы скопировать только кнопки копировать 1 поле ввода

Question

У меня есть рабочая кнопка, которая копирует текстовое значение из одного поля ввода.

Мне нужно сделать два из них, но когда я изменяю значение, первая кнопка начинает копировать значение из первого ввода-field.Вот мой код:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("input-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE" value="CODE" style="text-align:center;" id="input-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>


            <!--- SECOND --->


<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("coupon2-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE2" value="CODE2" style="text-align:center;" id="coupon2-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>

Редактор Tryit: https://www.w3schools.com/code/tryit.asp?filename=FWJF0IFLP9D8 Есть предложения?

Answer 1

Это вывод вашего текущего кода:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("input-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE" value="CODE" style="text-align:center;" id="input-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>


            <!--- SECOND --->


<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("coupon2-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE" value="CODE" style="text-align:center;" id="coupon2-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>

Вот вывод обновленного кода:

function CopyCode(){
    var text = document.getElementById("coupon2-text");
    text.select();
    document.execCommand("copy");
}
$("button").click(function() {
  var textId = $(this).attr("class");
  var text = document.getElementById(textId);
  text.select();
  document.execCommand("copy");
});

$('input').keypress(function(e) {
             e.preventDefault();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="CODE" value="CODE 1" style="text-align:center;" id="coupon2-text"/>
<button class="coupon2-text">COPY</button>  <br/> <br/>

<input type="text" placeholder="CODE" value="CODE 2" style="text-align:center;" id="input-text"/>
   <button class="input-text">COPY</button>  <br/> <br/>