如何在表格中添加另一行从下拉列表中选择一个选项？

This is what my table looks like:

This is my code:

    <table class="inventory" style="float:left;">
  <tbody>
    <tr>
        <th>Date bought</th>
      <th>Item</th>
      <th>Quantity</th>
      <th>Total</th>
      </tr>

    <tr>
        <td>
             <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="style.css">
        <script>
        $(document).ready(function() {
            $( "#datepicker" ).datepicker();
        });
        </script>
        <input type="text" id="datepicker"/>
        </td>
      <td>
          <select name="item_name_update" value="item_name_update" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
                   <option value="" disabled selected>Select Item</option>
            <?php
            $sth = $conn->prepare('Select item_name From item');
            $sth->execute();
            $data = $sth->fetchAll();   
            foreach ($data as $row ){
                if($row['item_name']!="")
             echo ' <option id=\"ItemName\" name=\"ItemName\" value="' .$row['item_name']. '">'.$row['item_name'].'</option>';
            }?>
            </select>
      </td>
      <td>
        <input type="text" placeholder="Quantity" name="Quantity" id="Quantity"/>
      </td>
      <td>
       <input type="text" placeholder="Total" value=""/>
      </td>
    </tr>
         <?php $totalCost="";
            if(!empty($_POST['item_name_update']) && !empty($_POST['datepicker']) && !empty($_POST['Quantity'])){
           $sth = $conn->prepare('Select price_per_unit From bill where item=:item and date=:date');
            $sth->execute(array(':item'=>$_POST['item_name_update'], ':date'=>$_POST['datepicker']));
            $data = $sth->fetchAll();   
            foreach ($data as $row ){
         $totalCost=($row['price_per_unit']*$_POST['Quantity']);
            }}
                ?>
  </tbody>
</table>

I want to add a row to the table each time an item is selected from the drop down. How do I do that? Is there a simple solution to it? Do I add a loop and add document.change in the select drop down?

Also, I want to add the total of all the Total textboxes that will be there.

EDIT:

I got some code below which adds new row. But new row should be added when I select a value from drop down of newest row. Right now it's adding on selecting the FIRST drop down ONLY.

Yes, we can do it using insertAfter method. You should call it on the change of the select tag by

$(function() {
   $("select").change(function() {
       $('<tr><td>new td1</td><td>new td2</td></tr>').insertAfter($(this).closest('tr'));
   });
});

Hope it helps :) Here is the Jsfiddle

Use this code.

$(function() {$(".ddplaceholder").change(function() {
   $('<tr><td>new td1</td><td>new td2</td></tr>').insertAfter($(this).closest('tr')); }); });