如何在动态添加的行中显示依赖项下拉数据

Question

我试图在动态添加的row中显示依赖项下拉数据。当我选择第一个类别时，将显示第二个下拉列表“产品代码”。产品代码数据来自服务器，取决于Ajax请求，当我测试“警报”时，此数据正确地来自服务器。但是我在显示此数据时遇到了问题，当我更改类别时，所有产品代码都会更改。我想更改不同的类别，产品代码将分别更改，我想乘以数量和价格。 这是我的HTML代码，同样的代码来自使用Ajax请求的服务器。我也无法删除动态添加的行。请帮助我任何人

var x = 1;
$('#addButton').on('click', function(e) {
  e.preventDefault();
  if (x < 10) {
    x++;
    $.ajax({
      url: "{{ route('admin.purchase_order.getRow')}}",
      method: "GET",
      success: function(data) {
        $("#addRow").append(data);
      }
    })
  } else {
    alert('Only 10 row alloted');
  }
});

// remove row
$('#addRow').on("click", "#remove_field", function(e) {
  alert("okko")
  e.preventDefault();
  $(this).parent('tr').remove();
  x--;

});
/* Ajax Code */
$('#addRow').delegate('.category_id', 'change', function() {
  var category_id = $(this).val();
  var token = "{{csrf_token()}}";
  $.ajax({
    url: '{{ route('
    admin.product.getCode ') }}',
    type: 'GET',
    data: {
      category_id: category_id,
      '_token': token
    },
    dataType: 'json',
    success: function(response) {
      var len = response.length;
      if (len == 0) {
        // i think my problem creating from here
        $(".product_code").empty();
        var id = "";
        var name = "";
        $(".product_code").append("<option value='" + id + "'>" + name + "</option>");
      }
      for (var i = 0; i < len; i++) {
        var id = response[i]['id'];
        var name = response[i]['product_code'];
        $(".product_code").append("<option value='" + id + "'>" + name + "</option>");
      }
    }
  });
});

<table class="table">
  <thead>
    <tr>
      <th>Category</th>
      <th>Product Code</th>
      <th>Group</th>
      <th>Unit</th>
      <th>Color</th>
      <th>Rate price</th>
      <th>Quantity</th>
      <th></th>
    </tr>
    <tbody id="addRow">
      <tr>
        <td>
          <select class="form-control select2 category_id" id="category_id" name="category_id[]">
            <option value="">--Select--</option>
            @foreach($category as $category)
            <option value="{{ $category->id}}">{{ $category->category_name}}</option>
            @endforeach
          </select>
        </td>
        <td>
          <select class="form-control select2 product_code" name="code_id[]" id="product_code">
            <option value="">--Select product Code--</option>

          </select>
        </td>
        <td></td>
        <td></td>
        <td>
          <input type="text" class="form-control rate" name="product_rate[]">
        </td>
        <td>
          <input type="text" class="form-control quantity" name="quantity[]">
        </td>
        <td></td>
      </tr>
    </tbody>
</table>