<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>

$('#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());
});