使用Jquery、Php和mysql从动态添加的行中获取data-price属性

我有一个订单表单，其中的产品是从我的mysql数据库拉到下拉菜单。客户从下拉菜单中选择产品，然后通过data-price属性自动填充价格字段。我添加了一个按钮来添加更多的产品(克隆包含产品和价格字段的行)…当我这样做时，它仍然填充添加行的下拉菜单，但是price字段只自动填充第一行。有什么想法如何使它自动填充在动态添加的行，以及?

Jquery for data-price population of price field:

<script>
$(function() {  
$('select[name="product"]').change(function()
    {
     $('#price').val($('select[name="product"] option:selected').data('price'));
    });
  });
</script>

Jquery添加行:

<script>
$(document).ready(function(){
 //This line clones the row inside the '.row' class and transforms it to plain html.
 var clonedRow = $('.row').clone().html();
 //This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags
 var appendRow = '<tr class = "row">' + clonedRow + '</tr>';  
 $('#btnAddMore').click(function(){
  //this line get's the last row and appends the appendRow when it finds the correct row.
        $('.orderForm tr:last').after(appendRow);
    });
 //when you click on the button called "delete", the function inside will be triggered.
 $('.deleteThisRow').live('click',function(){
     var rowLength = $('.row').length;
         //this line makes sure that we don't ever run out of rows.
      if(rowLength > 1){
   deleteRow(this);
  }else{
   $('.orderForm tr:last').after(appendRow);
   deleteRow(this);
  }
 });
 function deleteRow(currentNode){
  $(currentNode).parent().parent().remove();
 }
 });
 </script>

<div class="pure-control-group">
            <label>Please Choose a Contact</label><select name="contact" required>
            <option value=""></option>
            <?php $usrSql = "SELECT id, firstName, lastName FROM contacts ORDER BY lastName ASC";
                  $usrResult = mysql_query($usrSql, $link);
                  while($usrRow = mysql_fetch_assoc($usrResult)){?>
            <option value="<?php echo $usrRow['id'];?>" <?php if ($getContactId == $usrRow['id']) { ?> selected <?php } ?>><?php echo "".$usrRow['lastName'].", ".$usrRow['firstName'].""; ?></option>
                            <?php } ?>
                      </select>
        </div>              
        <div class="pure-control-group">
            <label>Date</label><input type="text" name="datepicker" id="datepicker" value="<?php echo $date; ?>" />
        </div>
       <table class="orderForm">
       <tr class="row">
       <td>
       <div class="pure-control-group">
            <label>Product or Service</label><select name="product" required>
            <option value=""></option>
            <?php $productSql = "SELECT product_id, product, price FROM products ORDER BY product desc";
                  $productResult = mysql_query($productSql, $link);
                  while($productRow = mysql_fetch_assoc($productResult)){?>
                  <option value="<?php echo $productRow['prouct_id'];?>" data-price="$<?php echo $productRow['price']; ?>"><?php echo $productRow['product']; ?></option>
                            <?php } ?>
                      </select>
       </div>
       <div class="pure-control-group">
       <label>Price</label><input type="text" id="price" name="price">
       </div>
        <div class="pure-control-group">
            <label>Discount %</label><select name="discount" required>
            <option value="" selected>-- None --</option>
            <option value="5">5%</option>
            <option value="10">10%</option>
            <option value="15">15%</option>
            <option value="20">20%</option>
            <option value="25">25%</option>
            <option value="30">30%</option>
            <option value="35">35%</option>
            <option value="40">40%</option>
            <option value="45">45%</option>
            <option value="50">50%</option>
            <option value="55">55%</option>
            <option value="60">60%</option>
            <option value="65">65%</option>
            <option value="70">70%</option>
            <option value="75">75%</option>
            <option value="80">80%</option>
            <option value="85">85%</option>
            <option value="90">90%</option>
            <option value="95">95%</option>
            <option value="100">100%</option>
            </select>
       </div>
       <input type="button" class="deleteThisRow"  value="Delete"/>
       </td>
       </tr>
       </table>
       <input type="button" id="btnAddMore"  value="More Products" class="medBtn"/>
        <div class="pure-control-group">
        <label></label><input type="submit" id="submit" name="submit" value = "Submit" class="pure-button"/>
        </div>
    </fieldset>
</form>