Как заполнить поля ввода, динамически созданные на основе другого после выполнения запроса AJAX?

Question

У меня есть этот HTML-код, который динамически добавляет поля ввода штрих-кода [] и описания [] в мою форму, используя событие onfocusout, ниже приводится функция JS get_barcode_data для получения описания штрих-кода, но она работает только для одного штрих-кода[] поле ввода:

<div>
  <input type="text" id="barcode[]" name="barcode[]" onfocusout="get_barcode_data(this);"/>
</div>
<div>
  <textarea id="description[]" name="description[]" disabled="disabled"></textarea>
</div>
<div align="center">
  <a href="javascript:void(0);" class="add_input_button" title="Add row"></a>
</div>

Вызов console.log (name) отображает значение, введенное мной в любом из динамически создаваемых полей ввода штрих-кода [], и запрос успешно выполняется, но после этого я не получаюне знаю, как указать ответ на правильные поля штрих-кода [] и описания []:

function get_barcode_data(element)
{
  var name = element.value;
  console.log(name);
  $.ajax({
      method: 'POST',
      url: 'include/get_barcode_data.php',
      data: {
          barcode: name
      },
      success: function(response){
          if (response == 'FALSE') {
              $('#barcode[]').focus();
              $('#barcode[]').val('');
              $('#description[]').val('');
              var message = 'Invalid barcode.';
              alert( message );
          } else {
              var res = jQuery.parseJSON(response);
              $('#description').val(res.description);
          }
      }
  });
}

Любые идеи о том, как решить эту проблему, будут высоко оценены.

Answer 1

Как указал Джеймс в разделе комментариев, в вашем документе не должно быть дубликатов.Вам следует либо сгенерировать уникальные идентификаторы для каждого элемента, либо вообще удалить идентификаторы.

Если вы генерируете уникальные идентификаторы, вы можете передать сгенерированный идентификатор обработчику событий и использовать его для выбора правильного элемента.

    <div>
      <input type="text" id="barcode_123" name="barcode[]" onfocusout="get_barcode_data(this, 'description_123');"/>
    </div>
    <div>
      <textarea id="description_123" name="description[]" disabled="disabled"></textarea>
    </div>
    <div align="center">
      <a href="javascript:void(0);" class="add_input_button" title="Add row"></a>
    </div>

123 должно быть динамически генерируемым числом.

А в вашем обработчике:

function get_barcode_data(element, target_id)
{
  var name = element.value;
  console.log(name);
  $.ajax({
      method: 'POST',
      url: 'include/get_barcode_data.php',
      data: {
          barcode: name
      },
      success: function(response){
          if (response == 'FALSE') {
              $(element).focus();
              $(element).val('');
              $('#' + target_id).val('');
              var message = 'Invalid barcode.';
              alert( message );
          } else {
              var res = jQuery.parseJSON(response);
              $('#' + target_id).val(res.description);
          }
      }
  });
}

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

Вы бы действительно выиграли, если бы изучали хорошо продуманную среду, например Vue.js , Angular или Реагировать .