Как я могу изменить значение, которое связано, чтобы выбрать изменение в динамической форме, используя jquery?

Question

Я пытался создать форму, которая имеет два элемента, один элемент выбора и один входной ценой, вариант выбора хранятся в базе данных, поэтому я извлекаю ее и отображаю.

Пользователь может добавить новую строку с теми же элементами, когда нажата кнопка добавления, когда изменена опция выбора, я использую ajax, чтобы получить цену из базы данных и отобразить ее в текстовом вводе.

Все работало нормально с первой строкой, но когда пользователь добавляет новую строку, я не могу получить цену и получить следующее сообщение

"указанное значение" NaN "недопустимочисло. Значение должно соответствовать следующему регулярному выражению: -? (\ d + | \ d +. \ d + |. \ d +) ([eE] [- +]? \ d +)? "

Как я могу решить эту проблему или есть другой способ изменить значение ввода, используя идентификатор строки

<table id="tab_logic">
    <tr id='row0'>
        <td>1</td>
        <td>
            <select class="form-control item" name="item[]" required>
            <?php 
                $items = "SELECT itemCode, itemName FROM items";
                $itemslist = $conn->query($items);
                while($row = $itemslist->fetch_assoc()) {
                    echo "<option value='" . $row["itemCode"] . "'>" . $row["itemName"]. "</option>" ;
                }
            ?>
            </select>
        </td>
        <td>
            <input type="text" name='price[]' class="form-control price" required/>
        </td>
    </tr>
    <tr id='row1'></tr>
</table>
<button id="add_row" class="btn btn-default">Add Row</button>

<script>

function get_price(sel, item) 
{
    $.ajax({
        type: "POST",
        url : "getData.php",
        data: {itemCode: sel },
        success: function(data) {
            $(item).find("input").val(data.price) 
        },
    }); 
}

$(document).ready(function(){
    //add new row when add buttomn clicked 
    var i = 1;

    $("#add_row").click(function(){
        var a = i-1;

        $('#row' + i).html( $('#row' + a).html() )
                   .find('td:first-child')
                   .html(i+1);
        $('#tab_logic').append('<tr id="row' + (i+1) + '"></tr>');
        i++; 
    });

    //when selected item change get parent and call function 
    $('#tab_logic select').on('change', function() {
        var item = $(this).parent().parent();

        get_price(this.value, item);
    });

});

</script>

Answer 1

Я решил это окончательно, проблема была в том, что get_price вызывается только один раз при первом изменении, поэтому я решил это таким образом, вызвав функцию onclick

    <select class="form-control item" name="item[]" onclick="get_price(this.value,$(this).parent().parent());" id='1' required>