javascript - on change of select-option, add value to dynamically created input field through ajax

Question

this is the jquery that is selecting .select-service and on change, I need to add data to the input field #rate1.

$(document).on('change', '.select-service', function(e) {
        e.preventDefault();
        var serviceID = $(this).val();
        $.ajax({
          method: "POST",
          url: "async/service-selected.php",
          data: {service_id: serviceID},
          success: function (data) {
            $('#rate1').val(data);
          }
        });
      });

this is the PHP file service-selected.php that is echoing data

include_once '../includes/class.Main.php';  
  $dbf = new User();

  
  $service_id = $_POST['service_id'];
  $output = "";
  foreach($dbf->fetchOrder("service", "id='$service_id'") as $services){
    $output = $services['price'];
  };
  echo $output;

this is the jquery that is dynamically adding inputs when add button is clicked.

<script>
  var i=1;
  $(function () {

    $("#btnAdd").bind("click", function () {
     
        var div = $("<tr />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });

    $("body").on("click", ".remove", function () {
        $(this).closest("tr").remove();
        // GrandTotal();
    });
  });
  function GetDynamicTextBox(value) {
    
    
    i++;
    return  '<td><select class="form-control select2 select-service" style="width: 100%;" id="service-select'+i+'" required  name="product[]"><option value="">--Select Product--</option> <?php foreach($dbf->fetchOrder("service") as $services){?><option value="<?= $services['id'];?>"><?= $services['service'];?></option><?php }?></select></td>' + 
            '<td><input class="form-control rate" name = "rate[]" type="text" placeholder="Rate" id="rate1'+i+'" required readonly/></td>' + 
            '<td><input class="form-control" placeholder="Quantity" name = "qty[]" type="number" id="qty1'+i+'" onkeyup="QuantityPrice('+i+')" onclick="QuantityPrice('+i+')" autocomplete="off" /></td>' + 
            '<td><input class="form-control" placeholder="Sub Total" name = "sub_total[]" type="text"  id="sub_total1'+i+'" readonly required/></td>' + 

            '<td><input type="text" class="form-control payment-type" placeholder="payment type" name="pay_type[]" id="pay_type1'+i+'" ></td>' +
            '<td><input type="text" class="form-control discount" placeholder="discount" name="discount[]" id="discount1'+i+'" ></td>' +
            '<td><input type="text" class="form-control total" placeholder="total" name="total[]" readonly id="total1'+i+'" ></td>' +
            '<td><input type="text" class="form-control paid-amount" placeholder="paid amount" name="paid[]" id="paid1'+i+'" ></td>' +
            '<td><input type="text" class="form-control due-amount" placeholder="due amount" name="due[]" readonly id="due1'+i+'" ></td>' +

            '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'

            
  }
</script>

and this is the static input HTML

<td>
  <div class="form-group">                            
    <select class="form-control select-service" style="width: 100%;" id="service-select" required name="product[]">                              
      <option value="">--Select Services--</option>
                              <?php foreach($dbf->fetchOrder("service") as $services){?>                              
      <option value="<?= $services['id'];?>"><?= $services['service'];?></option>
                              <?php }?>                            
    </select>                         
  </div>
</td>
<td><div class="form-group rate"><input type="text" class="form-control rate" placeholder="Rate" readonly name="rate[]" id="rate1" required></div></td>
<td><div class="form-group"><input type="number" min="1" class="form-control qty" placeholder="Quantity" name="qty[]" id="qty1"  ></div></td>
<td><div class="form-group"><input type="text" min="1" class="form-control sub_total" placeholder="Sub Total" name="sub_total[]" readonly id="sub_total1" ></div></td>
<td><div class="form-group"><input type="text" min="1" class="form-control payment-type" placeholder="payment type" name="pay_type[]" id="pay_type1" ></div></td>
<td><div class="form-group"><input type="text" min="1" class="form-control discount" placeholder="discount" name="discount[]" id="discount1" ></div></td>
<td><div class="form-group"><input type="text" min="1" class="form-control total" placeholder="total" name="total[]" readonly id="total1" ></div></td>
<td><div class="form-group"><input type="text" min="1" class="form-control paid-amount" placeholder="paid amount" name="paid[]" id="paid1" ></div></td>
<td><div class="form-group"><input type="text" min="1" class="form-control due-amount" placeholder="due amount" name="due[]" readonly id="due1" ></div></td>
<td><button type="button" class="btn btn-danger remove" ><i class="glyphicon glyphicon-remove-sign"></i></button></td>

Price is only changing for static inputs and it (static price input) also changes when the dynamically select option is changed.

question from:https://stackoverflow.com/questions/65680181/on-change-of-select-option-add-value-to-dynamically-created-input-field-through

Answer 1

Waitting for answers