单击时，添加更多选择选项并通过ajax获取相关值

Question

单击时，添加更多按钮选择选项，并通过我在输入框中添加的ajax获取相关值，如果我一次添加5个选择框一次就一次通过一个值，则值正确显示，但是当我再次更改第二个值时，最后一个框中显示的更改 这是我的代码

    /* Below Jquery  */

    var max_fields = 10;
    var wrapper = $(".input_fields_wrap");
    var add_button = $(".add_field_button");
    var x = 0;
    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div class="row removeclass' + x + '"><div class="col-md-3"><div class="form-group"><select id="productdata' + x + '" data-placeholder="Choose a Product..." class="standardSelect' + x + ' sumclass" tabindex="1" name="inv_ins_product_details[]"><option value="" label="default"></option><?php foreach ($productdata as $productnames) { ?> <option dvalue="<?php echo $productnames['product_rate']; ?>" datapro="<?php echo $productnames['pro_id']; ?>" value="<?php echo $productnames['pro_id']; ?>, <?php echo $productnames['product_name']; ?>, <?php echo $productnames['product_details']; ?>, <?php echo $productnames['product_rate']; ?>"><?php echo $productnames['product_name']; ?></option><?php } ?></select></div></div><div class="col-md-3"><div class="form-group"><textarea id="inv_product_detail' + x + '" class="form-control" disabled=""></textarea></div></div><div class="col-md-3"><div class="form-group"><input id="inv_product_rate' + x + '" type="text" class="form-control productdetails' + x + ' ssclass"></div></div><div class="col-md-3"><button type="button" class="btn btn-danger remove_field"><i class="fa fa-minus-circle" aria-hidden="true"></i></button></div></div>');
            $("#productdata" + x).change(function () {
                var pro_id = $('option:selected', this).attr('datapro');
                var proid = 'pro_id=' + pro_id;
                $.ajax
                        ({
                            type: "POST",
                            url: "ajax-products.php",
                            data: proid,
                            cache: false,
                            success: function (ff)
                            {
                                var data = ff.split(",");
                                $("#inv_product_rate" + x).val(data[0]);
                                $('#inv_product_detail' + x).val(data[1]);
                            }
                        });

            });
            $(".standardSelect" + x).chosen({
                disable_search_threshold: 10,
                no_results_text: "Oops, nothing found!",
                width: "100%"
            });
            $(".chosen-search-input").attr("readonly", false);
        }
    });
    $(wrapper).on("click", ".remove_field", function (e) {
        e.preventDefault();
        $('.removeclass' + x).remove();
        x--;
    });