detect if dynamically added select option is in same row of there select option

I have 3 select options. If a user can click 'add more talent' it produces dynamic select option which also produces dynamic options.

If I click on the first select option on the newly added select options. The 2nd select options also changes.

This is my code

BLADE

<div class="row" id="talentcontainer">
                        <div class="col s3">
                          {!! Form::select('category[]', ['Select Category' => 0], null, ['class' => 'browser-default', 'id' => 'category']) !!}
                        </div>
                        <div class="col s3">
                          {!! Form::select('subcategory[]', ['Select Subcategory' => 'Select subcategory'], null, ['class' => 'browser-default', 'id' => 'subcategory']) !!}
                        </div>
                        <div class="col s3">
                          {!! Form::select('talent[]', ['Select talent'], null, ['class' => 'browser-default','id' => 'talent']) !!}
                        </div>
                        <div class="col s12">
                          <a href="javascript:void(0)" id="addtalent">Add more talent</a>
                        </div>
                       </div>

JS

$(document).ready(function($) {
      var i = 0;
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {},
            success: function(data){
                console.log(data);
                var next_id = $("#category");
                $("#category").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value.value).text(value.value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
    $("#category").change(function() {
        var tal_cal = $(this).val();
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $("#subcategory");
                $("#subcategory").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $("#talent");
                $("#talent").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
      });
    $("#subcategory").change(function() {
        var tal_cal = $(this).val();
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $("#talent");
                $("#talent").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
      });

    $('#talentcontainer').on('change', '.category', function(event) {
        var tal_cal = $(this).val();
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var target = $(event.target);
                console.log(target);
                var next_id = $('.subcategory');
                console.log(next_id);
                // var categoryID = $(event.target).attr('id');
                // var tid = event.delegateTarget.children[3].children[1].children[0].id;
                // var talentID = $("[class^=talent]").attr('id');
                // console.log(tid);
                $(".subcategory").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
      });

    $('#talentcontainer').on('change', '.subcategory', function(event) {
        var tal_cal = $(this).val();
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $(".talent");
                $(".talent").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
      });

      $('#talentcontainer').on('click', '#addtalent', function() {
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {},
            success: function(data){
                // var current = $(this).closest('.category').index();
                // console.log(current);
                var next_id = $(".category");
                $(".category").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value.value).text(value.value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
        });


    $("#addtalent").on("click", function (event) {
      $("#talentcontainer").append("<div class='row' id='temprow'><div class='col s3'><select class='category browser-default' name='category[]'></select></div><div class='col s3'><select class='subcategory browser-default' name='subcategory[]'></select></div><div class='col s3'><select class='talent browser-default' name='talent[]'><option value='Select Talent'>Select Talent</option></select></div><div class='col s2'><a href='javascript:void(0)' id='removetalent'>Remove</a></div></div>");
      i++;
    });

    $("#talentcontainer").on("click", '#removetalent',function (event) {
      $("#temprow").remove();
    });

    $(".wrap").on("click", '#removetalent',function (event) {
      var tal_cal = $(this).data("id");
      $.ajax({
            url: "",
            method: "GET",
            data: {tal_cal:tal_cal},
            success: function(data){
                console.log(data);
                $("#preload").remove();
            }
          });
      });
  });

What I want is everytime I choose on the first select option. the 2nd select option on the same row should only be affected and not the 2nd row too.

I am aware on this line of code that's why it also changes the 2nd row of select option but HOW do I do it right?

$('#talentcontainer').on('change', '.category', function(event) {
        var tal_cal = $(this).val();
        $.ajax({
            url: "",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var target = $(event.target);
                console.log(target);
                var next_id = $('.subcategory');
                console.log(next_id);
                // var categoryID = $(event.target).attr('id');
                // var tid = event.delegateTarget.children[3].children[1].children[0].id;
                // var talentID = $("[class^=talent]").attr('id');
                // console.log(tid);
                $(".subcategory").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
      });

Please enlighten me.

via Camilo Go