title: Get data-price attribute from dynamically added row in order form with Jquery Php and mysql
body: <p>I have an order form in which the products are pulled from my mysql database into a dropdown menu. The customer selects the product from the dropdown menu then the price field is automatically populated via the data-price attribute. I have added a button to add more products (clone the row containing the product and price fields)... When I do that, it still populates the dropdown menu in the added row, but the price field only automatically populates on the first row. Any ideas on how to make it automatically populate in the dynamically added rows as well?</p>
  
  <p>Jquery for data-price population of price field:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {  
  $('select[name="product"]').change(function()
      {
       $('#price').val($('select[name="product"] option:selected').data('price'));
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Jquery for added row :</p>
  
  <pre><code>&lt;script&gt;
  $(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 &lt;tr&gt; tags since cloning ignores those tags
   var appendRow = '&lt;tr class = "row"&gt;' + clonedRow + '&lt;/tr&gt;';  
  
   $('#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 &gt; 1){
     deleteRow(this);
    }else{
     $('.orderForm tr:last').after(appendRow);
     deleteRow(this);
    }
   });
  
   function deleteRow(currentNode){
    $(currentNode).parent().parent().remove();
   }
   });
  
   &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="pure-control-group"&gt;
              &lt;label&gt;Please Choose a Contact&lt;/label&gt;&lt;select name="contact" required&gt;
              &lt;option value=""&gt;&lt;/option&gt;
              &lt;?php $usrSql = "SELECT id, firstName, lastName FROM contacts ORDER BY lastName ASC";
                    $usrResult = mysql_query($usrSql, $link);
                    while($usrRow = mysql_fetch_assoc($usrResult)){?&gt;
              &lt;option value="&lt;?php echo $usrRow['id'];?&gt;" &lt;?php if ($getContactId == $usrRow['id']) { ?&gt; selected &lt;?php } ?&gt;&gt;&lt;?php echo "".$usrRow['lastName'].", ".$usrRow['firstName'].""; ?&gt;&lt;/option&gt;
                              &lt;?php } ?&gt;
                        &lt;/select&gt;
          &lt;/div&gt;              
          &lt;div class="pure-control-group"&gt;
              &lt;label&gt;Date&lt;/label&gt;&lt;input type="text" name="datepicker" id="datepicker" value="&lt;?php echo $date; ?&gt;" /&gt;
          &lt;/div&gt;
  
         &lt;table class="orderForm"&gt;
         &lt;tr class="row"&gt;
         &lt;td&gt;
         &lt;div class="pure-control-group"&gt;
              &lt;label&gt;Product or Service&lt;/label&gt;&lt;select name="product" required&gt;
              &lt;option value=""&gt;&lt;/option&gt;
              &lt;?php $productSql = "SELECT product_id, product, price FROM products ORDER BY product desc";
                    $productResult = mysql_query($productSql, $link);
                    while($productRow = mysql_fetch_assoc($productResult)){?&gt;
                    &lt;option value="&lt;?php echo $productRow['prouct_id'];?&gt;" data-price="$&lt;?php echo $productRow['price']; ?&gt;"&gt;&lt;?php echo $productRow['product']; ?&gt;&lt;/option&gt;
                              &lt;?php } ?&gt;
                        &lt;/select&gt;
  
         &lt;/div&gt;
         &lt;div class="pure-control-group"&gt;
         &lt;label&gt;Price&lt;/label&gt;&lt;input type="text" id="price" name="price"&gt;
         &lt;/div&gt;
          &lt;div class="pure-control-group"&gt;
              &lt;label&gt;Discount %&lt;/label&gt;&lt;select name="discount" required&gt;
              &lt;option value="" selected&gt;-- None --&lt;/option&gt;
              &lt;option value="5"&gt;5%&lt;/option&gt;
              &lt;option value="10"&gt;10%&lt;/option&gt;
              &lt;option value="15"&gt;15%&lt;/option&gt;
              &lt;option value="20"&gt;20%&lt;/option&gt;
              &lt;option value="25"&gt;25%&lt;/option&gt;
              &lt;option value="30"&gt;30%&lt;/option&gt;
              &lt;option value="35"&gt;35%&lt;/option&gt;
              &lt;option value="40"&gt;40%&lt;/option&gt;
              &lt;option value="45"&gt;45%&lt;/option&gt;
              &lt;option value="50"&gt;50%&lt;/option&gt;
              &lt;option value="55"&gt;55%&lt;/option&gt;
              &lt;option value="60"&gt;60%&lt;/option&gt;
              &lt;option value="65"&gt;65%&lt;/option&gt;
              &lt;option value="70"&gt;70%&lt;/option&gt;
              &lt;option value="75"&gt;75%&lt;/option&gt;
              &lt;option value="80"&gt;80%&lt;/option&gt;
              &lt;option value="85"&gt;85%&lt;/option&gt;
              &lt;option value="90"&gt;90%&lt;/option&gt;
              &lt;option value="95"&gt;95%&lt;/option&gt;
              &lt;option value="100"&gt;100%&lt;/option&gt;
              &lt;/select&gt;
  
         &lt;/div&gt;
         &lt;input type="button" class="deleteThisRow"  value="Delete"/&gt;
         &lt;/td&gt;
         &lt;/tr&gt;
         &lt;/table&gt;
         &lt;input type="button" id="btnAddMore"  value="More Products" class="medBtn"/&gt;
          &lt;div class="pure-control-group"&gt;
          &lt;label&gt;&lt;/label&gt;&lt;input type="submit" id="submit" name="submit" value = "Submit" class="pure-button"/&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>