Auto-Populate text field from drop-down selection in dynamically added rows - php

Question

I have a form in which users can dynamically add rows. In each row there is a drop-down menu of products that should auto-populate a text field with the price associated with the product chosen. This works perfectly for the first row, but does not work in the dynamically added rows. The product names are still being pulled from the mysql database into the drop-down, but it is not auto-populating the text field when chosen. Any help would be appreciated!
EDIT: I added the following section, which I think will make this whole thing work, I just need to figure out how to attach the i variable to the name or id or class, and then I can have the auto-populate code include price[i] and product[i]... and I THINK that will make it work for each dynamically added row. Any ideas now?
for(var i=0;i<$('.orderform tr').length;i++)
{
}
END EDIT
Auto-populate code:
<script>
$(function() {
$('select[name="product[]"]').change(function()
{
$('#price').val($('select[name="product[]"] option:selected').data('price'));
});
});
</script>
Adding a row code:
<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);
for(var i=0;i<$('.orderform tr').length;i++)
{
}
});
</script>
HTML/PHP:
<table class="orderForm" id="orderForm" width="100%">
<tr class="row">
<td>
<div class="pure-control-group">
<label>Product or Service</label><select name="product[]" id="product">
<option value=""></option>
<?php 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>
<input type="button" class="deleteThisRow" id="deleteThisRow" value="Delete"/>
</td>
</tr>
</table>
<input type="button" id="btnAddMore" value="Add Product or Service" class="pure-button"/>

Answer 1

.clone() by default doesn't clone the event handlers. You can use .clone(true).appendTo(".orderForm");. The true parameter of the .clone() function copies the values and events over as well.