Я создаю концепцию addrow с динамическим заполнением выпадающих заранее, спасибо за решение

Question

Это мой взгляд

<tbody>
                          <tr>
                            <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>

скрипт для динамического заполнения из БД и добавления строки JavaScript.

<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>

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

  function addRow(){
    var tr = '<tr>'+
                    '<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);

  };

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

</script>  

Первая строка работает нормально, добавление строки также работает, но при добавлении строки это не заполняет зависимую строку. Что я делаю неправильно в этом массиве. Как я могу разрешить это. Зависимостьтип сервиса не работает.Как сохранить это в базе данных. Без уникальной идентификации.