Как синхронизировать каждую пару динамически создаваемых входов?

Question

Я создаю динамически несколько элементов и хочу синхронизировать определенные элементы. Я пишу этот код, чтобы дать представление о моей проблеме настолько просто, насколько я могу.

После создания ввода и добавления его значения я хочу иметь возможность редактировать его каждый раз, когда захочу. Поэтому, если я создаю несколько входов с идентификатором input0,1,2 etc. и изменяю значение конкретного, я хочу получить это значение в подходящем входе. Я пишу функцию для 1 пары. Как я могу добиться этого для каждой пары динамически создаваемых входов?

$(document).ready(function() {
  var a = 0;
  $('#add').hide();
  
  $('#generateInput').click(function() {
    $('#divArea').append('<input name="input' + a + '">');
    $('#generateInput').toggle();
    $('#add').toggle();
  })
  
  $('#add').click(function() {
    $('#divArea').append('<input name="copyInput' + a + '" value="' + $('input[name="input' + a + '"]').val() + '"readonly="readonly"><br />');
    $('#add,#generateInput').toggle();
    a++;
  })
});

//how to make this for all created inputs?
$(document).on('keyup', '[name="input0"]', function() {
  $('[name="copyInput0"]').val(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea"></div>

<button id="generateInput">Generate</button>
<button id="add">Add</button>

Answer 1

Вы можете просто использовать onkeyup() для каждого входа, который вы создаете, и получить значение внутри этой функции.

var a = 0;

$(document).ready(function() {

  $('#add').hide();
  $('#generateInput').click(function() {
    $('#divArea').append('<input onkeyup="onKeyUp(this)" name="input' + a + '" index="' + a + '">');
    $('#generateInput').toggle();
    $('#add').toggle();
  })
  $('#add').click(function() {
    $('#divArea').append('<input name="copyInput' + a + '" value="' + $('input[name="input' + a + '"]').val() + '"readonly="readonly"><br />');
    $('#add,#generateInput').toggle();
    a++;
  })
});
//how to make this for all created inputs?
function onKeyUp(input) {
  $('input[name="copyInput' + $(input).attr('index') + '"]').val(input.value)
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="divArea">
</div>

<button id="generateInput">
    Generate
    </button>
<button id="add">
    Add
    </button>