เลือกชื่อสินค้าใน dropdown แล้วเเสดงราคาสินค้า ชื่อกับราคาอยู่ในdatabase เดี่ยวกัน

<center>
   <div class="panel-heading">
</center>
<table class="table table-bordered table-hover" id="tab_logic">
   <thead>
      <tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
         <th class="text-center"> # </th>
         <th class="text-center"> สินค้า </th>
         <th class="text-center"> จำนวน </th>
         <th class="text-center"> ราคา </th>
         <th class="text-center"> ราคารวม </th>
      </tr>
   </thead>
   <tbody>
      <tr id='addr0'>
         <td>1</td>
         <td>
            <select name="pd_id" id="pd_id" class="form-control" required>
               <?php while($row1 = mysqli_fetch_array($result3)):;?>
               <!-- เพิ่ม attribute เพื่อเก็บราคาจากฐานข้อมูล เปลี่ยน  $row1['price'] เป็นชื่อคอลัมน์ที่เก็บราคาสินค้า -->
               <option value="<?php echo $row1[0];?>" price="<?php echo $row1['price'];?>"><?php echo $row1[1];?></option>
               <?php endwhile;?>
            </select>
         </td>
         <td><input type="number" name='qty[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0"/></td>
         <td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price" step="0.00" min="0"/></td>
         <td><input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td>
      </tr>
      <tr id='addr1'></tr>
   </tbody>
</table>
<div class="row clearfix">
   <div class="col-md-12">
      <button id="add_row" class="btn btn-default pull-left">Add Row</button>
      <button id='delete_row' class="pull-right btn btn-default">Delete Row</button>
   </div>
</div>
<div class="row clearfix" style="margin-top:20px">
<div class="pull-right col-md-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
   <tbody>
      <tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
         <th class="text-center">Sub Total</th>
         <td class="text-center"><input type="number" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" readonly/></td>
      </tr>
      <tr>
         <th class="text-center">Tax</th>
         <td class="text-center">
            <div class="input-group mb-2 mb-sm-0">
               <input type="number" class="form-control" id="tax" placeholder="0">
               <div class="input-group-addon">%</div>
            </div>
         </td>
      </tr>
      <tr>
         <th class="text-center">Tax Amount</th>
         <td class="text-center"><input type="number" name='tax_amount' id="tax_amount" placeholder='0.00' class="form-control" readonly/></td>
      </tr>
      <tr>
         <th class="text-center">Grand Total</th>
         <td class="text-center"><input type="number" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly/></td>
      </tr>
   </tbody>
</table>

<script>
   $(document).ready(function () {

      option_list('addr0');

      var i = 1;
      $("#add_row").click(function () {
         b = i - 1;
         $('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
         $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
         option_list('addr' + i);
         i++;
      });
      $("#delete_row").click(function () {
         if (i > 1) {
            $("#addr" + (i - 1)).html('');
            i--;
         }
         calc();
      });

      $(".product").on('change', function () {
         option_checker(this)
      });


      $('#tab_logic tbody').on('keyup change', function () {
         calc();
      });
      
      $('#tax').on('keyup change', function () {
         calc_total();
      });
      
      // ย้าย onchange ของ select มาไว้ใน ready() ด้วยกันโค้ดจะได้ดูเป็นสัดส่วน
      /*
      $( "select" ).change(function () {    
         document.getElementById("loc").innerHTML="You selected: "+document.getElementById("pd_id").value;  
      });
      */
      
      // แต่แนะนำให้ใช้ id selector ป้องกันเผื่ออยากใส่ select option ในหน้านี้เพิ่มเติมภายหลัง
      $("#pd_id").change(function () {
         // ดึงราคาจาก attribute (price) ของ select option ที่มีสถานะเป็น selected มาแสดงใน column ราคา
	     $("#addr0 input[name='price[]']").val($(this).find('option:selected').attr('price')); 
      });
   });

function option_checker(id) {
   var myOption = $(id).val();
   var s = 0;
   $('#tab_logic tbody tr select').each(function (index, element) {
      var myselect = $(this).val();
      if (myselect == myOption) {
         s += 1;
      }
   });
   if (s > 1) {
      alert(myOption + ' as been added already try new..')
   }
}

function option_list(id) {

}

function calc() {
   $('#tab_logic tbody tr').each(function (i, element) {

      var html = $(this).html();

      var qty = $(this).find('.qty').val();
      var price = $(this).find('.price').val();
      $(this).find('.total').val(qty * price);

      calc_total();
   });
}

function calc_total() {
   total = 0;
   $('.total').each(function () {
      total += parseInt($(this).val());
   });
   $('#sub_total').val(total.toFixed(2));
   tax_sum = total / 100 * $('#tax').val();
   $('#tax_amount').val(tax_sum.toFixed(2));
   $('#total_amount').val((tax_sum + total).toFixed(2));
}
</script>

// แต่แนะนำให้ใช้ id selector ป้องกันเผื่ออยากใส่ select option ในหน้านี้เพิ่มเติมภายหลัง

<select name="pd_id" class="form-control" required>

$("select").change(function () {  // ใช้ selector เหมือนวิธีเดิมของคุณ