Обновление массива формы с использованием jquery и ajax при изменении выбора

Question

У меня есть приведенная ниже структура HTML:

<div class="event-logistics">
    <div class="logistics assig-row" id="logistic-block">
        <div class="row">
            <div class="col-3">
                <select class="form-control logistic-id-input" name="logistic_id[]" placeholder="Select The Item" id="logistic-id-input" required>
                    <option value="">Select The Item...</option>
                  <?php foreach ($logistics_inventory as $item) { ?>                                                
                    <optgroup label="<?php echo $item['item']; ?>">
                        <?php childItems($item['id'], $surveyDB, $MysqlCon); ?>
                    </optgroup>
                  <?php } ?>
                </select>
            </div> 
<div class="col-2">
    <input class="form-control quantity-input" id="quantity-input" type="number" name="quantity[]" value="1" min="1" max="" required />
    <div class="form-control-feedback"><small>Quantity. </small></div>
</div>
<div class="col-2">
    <input class="form-control unit-price-input" id="unit-price-input" type="number" name="unit_price[]" value="" min="0" max="" step="any" required />
    <div class="form-control-feedback"></div>
</div>


    <div class="form-group row">
    <div class="col-1">
        <a class="addLogistic" title="Add another logistic after"><i class="fa fa-plus-circle fa-2x"></i></a>
        <a class="removeLogistic" title="delete this item"><i class="fa fa-minus-circle fa-2x"></i></a>
</div>
</div>
    </div>
</div>
</div>

, и я использую приведенный ниже код JavaScript для получения данных и обновления файлов:

<script type="text/javascript">

            $(".logistic-id-input").change(function() {

                var selectedItem = $(this).val(); 
                var quantity = $("#quantity-input").val();
                $.ajax({
                       type:"POST",
                       url:"getLogisticItem.php",
                       data: {id: selectedItem},
                       dataType: "json",
                       success: function(response){
                          if(response.status == "success") {

                            $(".unit-price-input").val(response.unit_price); 
                            $(".total-price-input").val(response.unit_price * quantity); 

                            } else {
                             alert("No data found for this item!");
                            }
                        }
                });

               });
            </script>

Проблема в том, что скриптРаботая нормально только для первого элемента, я также пытался использовать:

$(this).closest('div').find('.unit-price-input').val(response.unit_price);

Но это также не помогает, пожалуйста, помогите.

Answer 1

Я поместил четыре элемента в один ряд, затем я использовал следующий код JavaScript:

$('.event-logistics').on('change','.logistic-id-input', function(event){  

                    var selectedItem = $(this).val();
                    var quantity = $(this).closest('div.row').find(".quantity-input").val();
                    var $this = $(this).closest('div.row');
                    $.ajax({
                           type:"POST",
                           url:"getLogisticItem.php",
                           data: {id: selectedItem},
                           dataType: "json",
                           success: function(response){
                              if(response.status == "success") {

                                $this.find("#unit-price-input").val(response.unit_price);                            
                                $this.find('#responsible-name-input').val(response.name);
                                $this.find('#responsible-email-input').val(response.email);
                                $this.find('#total-price-input').val(response.unit_price * quantity);
                                } else {
                                 alert("No data found for this item!");
                                }
                            }
                    });
                });

, и теперь он работает