重复绑定JSON结果

i'm trying to bind JSON result to dynamically generated textboxes it is working fine on a single textbox but not working with dynamic generated textbox it is duplicating the same value on all textboxes, i'm sharing what i have done so far:

JQUERY:

function bindAutoComplete(classname) {
    $("." + classname).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/Admin/Ticket/GetPart',
                type: "GET",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    if (data != null) {
                        if (data.length > 0) {
                            response($.map(data, function (item) {
                                return { label: item.PartNumber, value: item.PartNumber };
                            }))
                        }
                        else {
                            response([{ label: 'No results found.' }]);
                        }
                    }
                }
            })
        },
    });

}

function bindData() {
    var errormsg = "";
    var amount = $('.inputs').val();

    $.ajax({
        type: "GET",
        url: '/Admin/Ticket/GetPart',
        data: { 'term': amount },
        dataType: "json",
        success: function (data) {
            if (data != null) {
                if (data.length > 0) {

                    $('.buyingprice').val(data[0].Price);
                }
                else {

                    $('.buyingprice').val('');
                }
            }

        },
        error: function (jqXHR, exception) {
            $('#error').html(jqXHR)
        }
    });
};

// fetch part number
$(document).ready(function () {
    bindAutoComplete('inputs');
    $('.inputs').keyup(bindData)
});

$("#AddMore").click(function () {

    $("#maintable").each(function () {

        var tds = '<tr>';

        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';

        if ($('tbody', this).length > 0) {

            $('tbody', this).append(tds);
            //   bindData();
            bindAutoComplete('inputs');
            $("#delete").fadeIn('200');
        }
        else {
            $(this).append(tds);
            bindAutoComplete('inputs');
            //    bindData();

        }
    });

});

HTML:

 <table id="maintable">
    <thead>
        <tr>
            <th>
                Part No
            </th>
            <th>
                BP
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input class="inputs" type="text" name="abcd" id="PartNumber23" style="width:130px;" />
            </td>
            <td>
                <input class="buyingprice text-box single-line" id="BuyingPrice" name="BuyingPrice" type="text" value="" />
            </td>
        </tr>
    </tbody>
</table>

Output Image

i'm getting result from autocomplete on all dynamic textboxes and binding the values to dynamic textboxes respectively but it is binding the same value on all dynamic textboxes. i have searched internet but couldn't found any solution. please guide me i'm stuck here from 2 days

Because you are using "GET" Type as GET method will cache the data in the browser. use "POST" if data is new on each request.

Don't forget to decorate your Controller method also with [HttpPost] as well.

$.ajax({
                url: '/Admin/Ticket/GetPart',
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    if (data != null) {
                        if (data.length > 0) {
                            response($.map(data, function (item) {
                                return { label: item.PartNumber, value: item.PartNumber };
                            }))
                        }
                        else {
                            response([{ label: 'No results found.' }]);
                        }
                    }
                }
            })

There are a few potential problems. with you javascript. This

$('.inputs').keyup(bindData)

is binding the keyup only to elements with classname = "input" that existing when the DOM is created. To ensure its bound to dynamically created elements, use

$("#maintable").on('keyup', '.inputs', function() {...

In bindData(){.., this line

var amount = $('.inputs').val();

gets the value of the first input with classname = "input" (not the one you may want). This line

$('.buyingprice').val(data[0].Price);

sets the value of all inputs with classname = "buyingprice" to data[0].Price.

You need to use $(this) where you want to refer to the current element.

In $("#AddMore").click(function () {...

$("#maintable").each(function () {

seems pointless since you only appear to have one table with id = "maintable", and

bindAutoComplete('inputs');

is re-binding all inputs (including the ones you already bound).