Jquery row index based select list population

I am creating dynamic fields inside html table using following code:

$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><select class="form-control dynamic" id="governorate" name="governorate[]" data-dependent="destination">@if ($Governorate->count()) @foreach($Governorate as $gov)<option value=></option>@endforeach @endif                                          </select></td>            <td><select class="form-control" id="destination" name="destination[]"></select></td></tr>');  

      });

It contains two drop down select lists Governorate and Destinations where second is being populated after the selection of first. It working fine.

I just want to populate second list based upon row index, currently only first row select list is being re-populated upon change of first one in any row.

$('table').on('change', '.dynamic', 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:"",
    method:"POST",
    data:{select:select, value:value, _token:_token, dependent:dependent},
    success:function(result)
    {
     $('#'+dependent).html(result);
    }

   });
  }
 });

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2ZIuhuY
via IFTTT