jquery .change函数用于填充数据库中的表单字段，而不是使用Js动态添加行

Question

我有一个表单，用户将一个类别输入到表单字段类别中，表单上的其他字段如rate，tarriff代码等填充了来自数据库的信息，到目前为止我的工作正常，我的问题是该表单允许用户动态地将其中包含这些字段的行添加到另一个类别中，但在我尝试输入另一个类别后创建该行时，没有其他字段像第一行那样填充。

这是我正在使用的代码。这可以获取一行的信息，但其余部分没有任何结果

  <script type="text/javascript">
      $(function() { // This code will be executed when DOM is ready
          $('#categories').change(function() { // When the value for the     
              categories element change, this will be triggered
                 var $self = $(this); // create a jQuery object with the 
                    select inside
                  $.post("getTariffcd.php", { categories : $self.val()}, 
               function(json) {
                if (json && json.status) {
                    $('#tariffcd').val(json.tariff);
                    $('#sub_heading').val(json.subhead);
                    $('#rate').val(json.rate);
                    $('#elevy').val(json.elevy);
                }
             })
          });
        })
    </script>

我的getTariffcd.php是这个

    <?php
          $pdo = new PDO("mysql:host=localhost;dbname=customs;charset=utf8", 
              "root", "");

              header("Content-Type:application/json; Charset=utf-8");

                 $st = $pdo->prepare("SELECT tariffcd, sub_heading, rate,  
                       elevy FROM lt_products WHERE categories = 
                         :categories");
                             $st->execute(array ('categories' =>  
                                  $_POST['categories']));
                                     $data = $st->fetch(PDO::FETCH_ASSOC);
                                         echo json_encode(array ('status' => 
                          true, 'tariff' => $data ['tariffcd'], 'subhead' =>  
                  $data ['sub_heading'], 'rate' => $data ['rate'], 'elevy' 
             => $data ['elevy']));

我的表格行是这个

     <p>        
          <?php //connect to mysql database
               $connection = 
                    mysqli_connect("localhost","root","","customs")or 
                             die("Error " . mysqli_error($connection));
                               //fetch data from database
                       $sql = "select categories from lt_products";
                     $result = mysqli_query($connection, $sql) or die("Error 
          " . mysqli_error($connection));?>

         <input type="text" list="productcategories"   name="categories[]"   
              class="form-control"  id="categories" placeholder="Type Name 
                  of Product" >
                          <datalist id="productcategories">

                              <?php while($row = mysqli_fetch_array($result, 
                                           MYSQLI_ASSOC)){ ?>
               <option value="<?php echo $row['categories']; ?>"><?php echo 
              $row['categories']; ?></option> <?php } ?>
          </datalist>
    <?php mysqli_close($connection); ?>

     </p>   
        Tariff CD:
        <input type="text" class="form-control" name="tariffcd[]" 
              disabled="disabled" id="tariffcd">
     </p>
      <p>
        Subheading:
         <input type="text" class="form-control" name="sub_heading[]" 
              disabled="disabled" id="sub_heading">
      </p>
      <p>
         Rate:
         <input type="text" class="form-control" name="rate[]" 
             disabled="disabled" id="rate">
      </p>
      <p>
         Environmental:
          <input type="text" class="form-control" name="elevy[]" 
              disabled="disabled" id="rate">
      </p>
       <p>
          <div class="input-group">
              <div class="input-group-addon">$</div>
                      <input type="text" name="cost" class="form-control" 
                         id="cost" size="6" maxlength="6" onKeyPress="return  
                           isNumberKey1(event)" placeholder="Cost" <?php if 
                     (isset($_POST['cost'])) echo "value=\"" . 
                  $_POST['cost'] . "\"" ?>>
            <div class="input-group-addon">.00</div>
        </div>
     </p>
         <button class="btn btn-success btn-add" type="button">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
               <br>
           <small>Press <span class="glyphicon glyphicon-plus gs"></span> to 
               add another Item to form :)</small>
                </div>
            </div>
         </div>
     </div>

添加行的Java脚本是

$(function()
 {
   $(document).on('click', '.btn-add', function(e)
  {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
        currentEntry = $(this).parents('.entry:first'),
        newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('btn-success').addClass('btn-danger')
        .html('<span class="glyphicon glyphicon-minus"></span>');
   }).on('click', '.btn-remove', function(e)
  {
    $(this).parents('.entry:first').remove();

       e.preventDefault();
        return false;
    });
 });

非常感谢任何帮助。