动态创建的元素具有不同的值但具有相同的索引

Question

我的代码是在触发＆＃39; keyup＆＃39;之后创建搜索建议。事件，因此用类＆＃34;建议框＆＃34;创建动态元素。点击任何＆＃34;意见箱＆＃34;创建了类，新的动态元素，每个元素都有父类＆＃34; transaction-entry＆＃34;。每个动态创建的＆＃34;交易条目＆＃34;班级有儿童班＆＃39; quantityInput＆＃39;这是一个输入元素。主要问题是，每个“数量输入”都是这样的。当通过＆＃39; keyup＆＃39;委托给静态元素时，类会显示相应的输入值。事件触发器但不是它们对应的索引（仅显示0）。

HTML CODE

           <div class="col-sm-1">
                <button type="button" id="delete-transact" class="btn btn-default" data-toggle="tooltip" title="Delete All Entries" data-placement="right">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                </button>
            </div>
            <!-- Input field for search suggestion -->
            <form method="POST" action="{{URL::to('/search/transaction')}}" id="transAction">
            {{ csrf_field() }}
            <div class="col-sm-12">
                <div class="form-group">
                    <input type="text" name="searchItem" id="transProductSearch" class="form-control" value="" title=""
                        placeholder="Search product">
                    <!--Container for dynamically created class "suggestion-box"-->
                    <div id="suggestion-container"></div>
                </div>

            </div>
            </form>
            <div class="cover">
                <div class="table-responsive">
                    <form action="" method="">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Quantity purchased</th>
                                    <th>Quantity Available</th>
                                    <th>Price</th>
                                </tr>
                            </thead>
                            <!--Container for dynamically created class "transaction entry"-->
                            <tbody id="transaction-body">

                            </tbody>
                            <tfoot>
                                <tr class="tfoot">
                                    <td>Total</td>
                                    <td class="transactionTotal"></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </form>
                </div>
            </div>

JQUERY CODE

   $('#transProductSearch').on('keyup',function (e) { //Event listener for ajax request
    e.preventDefault();
    if($(this).val() !== ""){
        $.ajax({
            type: "POST",
            url: $('#transAction').attr('action'),
            data: $('#transAction').serialize(),
            success: function (response) {
                $(".suggestion-box").remove();//Removing every dynamically created "suggestion-box" class on every successful AJAX request;
                pEntities = [];
                response = jQuery.parseJSON(response);
                $.each(response, function (indexInArray, value) { 
                     $("#suggestion-container").append($('<div>',{class:"suggestion-box", text:value.productName}));
                     pEntities[indexInArray] = {prodQuantity:"",prodId:"",prodPrice:"",prodName:""};
                     pEntities[indexInArray].prodQuantity = value.quantity;
                     pEntities[indexInArray].prodId = value.id;
                     pEntities[indexInArray].prodPrice = value.price;
                     pEntities[indexInArray].prodName = value.productName;
                });
            },
            error: function () { 
                console.log($('#transAction').val());
            }
        });
    }
    else{
        $('.suggestion-box').remove()//Removing every suggestion box if input field is empty
    } 
});

$('#suggestion-container').on("click",'.suggestion-box', function (e) { // Event delegation to append new "transaction-entry" class
    var index = $(this).index();
    $('#transaction-body').append('<tr class="transaction-entry"><input hidden class="prodId" value="'+pEntities[index].id+'"/><td>'+pEntities[index].prodName+'</td><td><input class="quantityInput" style="color:black" type="number"></td><td>'+pEntities[index].prodQuantity +'</td><td class="productPrice">'+pEntities[index].prodPrice +'</td></tr>');
    $('.suggestion-box').remove();
})

$('#delete-transact').click(function (e) {//Event listener to remove all transaction entry classes 
    e.preventDefault();
    $('#transaction-body').empty();
})
$('#transaction-body').on("keyup",'.quantityInput',function (e) {//Event Delegation to output quantityInput value and index
    console.log($(this).val()+" "+$(this).index());   
});