заполнение поля выбора из базы данных, а также добавление строк восстановления

Question

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

<script type="text/javascript">
  $('.addRow').on('click',function(){
    addRow();
    var i=1;
  });

  function addRow(){
    i++; 
    var tr = '<tr id="row'+i+'">'+
                    '<td>'+                     
                    '<select class="form-control input-lg dynamic" name="service_type[]" id="service_type" data-parsley-required="true" data-dependent="service_name">'+
                                '<option value="">Select Service Type</option>'+
                                @foreach ($services as $service )
                                  '<option value="{{ $service->service_type }}">{{ $service->service_type }}</option>'+
                                @endforeach
                              '</select>'+                        

                            '</td>'+
                  '<td>'+
                      '<select class="form-control input-lg dynamic" name="service_name[]" id="service_name" data-parsley-required="true">'+
                        '<option value="">Select Service name</option>'+
                      '</select>'+
                    '</td>'+
                  '<td><select class="form-control" name="service_sess[]" id="service_sess" data-parsley-required="true">'+
                                '<option value="">Select Sessions</option>'+
                                '<?php 

                                    for($i=0; $i<=20; $i++)
                                    {

                                        echo "<option value=".$i.">".$i."</option>";
                                    }
                                   ?>'+
                              '</select></td>'+
                  '<td><a href="#" class="btn btn-danger remove">-</td>'+
                '</tr>';
              $('tbody').append(tr);

  };
  i=1;
  $('tbody').on('click','.remove',function(){
    $(this).parent().parent().remove();
  });

</script>
<script type="text/javascript">
  $(document).ready(function(){
       $('.dynamic').change(function(){
        if($(this).val() != '')
        {
          var select = $(this).attr("id");
          var value = $(this).val();
          var dependent = $(this).data('dependent');
          var _token = $('input[name="_token"]').val();
          $.ajax({
            url:"{{ route('StandardPackageController.fetch') }}",method:"POST",data:{select:select,value:value,_token:_token,dependent:dependent},
            success:function(result)
            {
              $('#'+dependent).html(result);
            }
          })
        }


    });

  });


</script>

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