Заполните значения в jquery

Question

У меня новое начало, я пишу скрипт, используя PHP, jquery. Одна из форм, которые я разрабатываю, - это позволить пользователям добавлять несколько записей в одну таблицу. это было хорошо. моя проблема, мне нужно скопировать значение subSerId в другие поля добавленных строк после обновления имени клиента, я могу сделать это для первых двух записей, но после этого он не будет работать.

, как вы можете видеть через На следующей картинке, которую я ищу, когда я обновляю поле имени клиента, значение Service ID будет изменено. Это может произойти для первой и второй строк (родительских), но не для третьей.

А вот сценарий jquery

$(document).ready(function(){
  var maxRecords= 30;
  var i=1;
  var htmlForm='<tr id="row'+i+'"><td><input id="childsubSerID" disabled name="subSerID[]" type="text" class="form-control" required placeholder="Auto" value=""></td><td><input id="childclientName" name="clientName[]" type="text" class="form-control" required placeholder="Enter client name" value=""></td><td><input id="childsubSerType" name="subSerType[]" type="text" class="form-control" required placeholder="Enter grand name" value=""></td><td><input id="childserCount" name="serCount[]" type="text" class="form-control" required placeholder="Enter service count" value=""></td><td><input id="childsubSerDetails" name="subSerDetails[]" type="text" class="form-control" required placeholder="Enter details" value=""></td><td><button id="'+i+'" name="remove" class="btn btn-danger btn_remove" value="X">X</td></tr>';
  $('#add_more').click(function(){
    if(i<=maxRecords){

     $('#dynamic_field').append(htmlForm);
    i++;
    }

  });
  $(document).on('click','.btn_remove', function(){
      var button_id=$(this).attr("id");
      $('#row'+button_id+'').remove();
      i--;
  })  


 $("#dynamic_form").on('change','#clientName', function(){
     $('#subSerID').val(  $('#hiddenId').val() );
 });

 $("#dynamic_field").on('change','#childclientName', function(){
 $('#childsubSerID').val(  $('#subSerID').val() );
 });
});

Answer 1

Как я уже упоминал в своем комментарии, у вас не может быть нигде повторяющихся идентификаторов.

Измените код, чтобы использовать класс

Вам также нужно перейти через ближайший ("tr")

Я добавил тело, к которому нужно добавить

Я также проверяю длину тела вместо вычисления с использованием сложения и вычитания

const htmlForm = '<tr><td><input disabled name="subSerID[]" type="text" class="childsubSerID form-control" required placeholder="Auto" value=""></td><td><input name="clientName[]" type="text" class="childclientName form-control" required placeholder="Enter client name" value=""></td><td><input  name="subSerType[]" type="text" class="childsubSerType form-control" required placeholder="Enter grand name" value=""></td><td><input  name="serCount[]" type="text" class="childserCount form-control" required placeholder="Enter service count" value=""></td><td><input name="subSerDetails[]" type="text" class="childsubSerDetails form-control" required placeholder="Enter details" value=""></td><td><button class="btn btn-danger btn_remove" value="X">X</td></tr>';


$(function() {
  const maxRecords = 30;
  const $tb = $('#dynamic_field');

  $('#add_more').click(function() {
    if ($tb.find("tr").length < maxRecords) { // changed to length
      $tb.append(htmlForm);
    }

  });
  $tb.on('click', '.btn_remove', function() {
    this.closest("tr").remove();
  })


  $tb.on('change', '.clientName', function() { // where is this?
    $(this).closest("tr").find('.subSerID').val($('#hiddenId').val());
  });

  $tb.on('change', '.childclientName', function() {
    const $parentRow = $(this).closest("tr")
    $parentRow.find('.childsubSerID').val($parentRow.find('#subSerID').val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add_more">Add</button>
<table>
  <thead>
  </thead>
  <tbody id="dynamic_field"></tbody>
</table>

Answer 2

Предоставленного вами кода недостаточно, чтобы увидеть проблему, но я думаю, это потому, что вы используете один и тот же идентификатор для нескольких элементов, факт в том, что идентификатор элементов должен быть уникальным, и вы не можете иметь элементы с одинаковыми id (который приводит к ошибке, как в вашем случае). попробуйте использовать class вместо id, это должно решить вашу проблему.

Вы обновили свой код, и он больше не имеет смысла!