Pencarian data dinamis menggunakan ajax, jquery pada sebuah website

jadi di project ini user bertindak sebagai kasir untuk menghitung jumlah item yang dibeli customer. problemnya adalah dynamic input ini bisa bekerja secara sempurna. namun untuk pencarian data produk dan menampilkan field yang sesuai di text field pada form di field yang append tidak bekerja. saya mau tanya ini penyebabnya apa. dan bagaimana solusinya.

Terima Kasih

------------------------- View --------------------

<div class="wrapper">
  <div class="container">
    <div class="row">
      <h3 class="light">Transaksi Baru</h3>
    </div>
    <div class="row">
      <div class="divider"></div>
    </div>
    <div class="row">
      <button id="add_items" class="btn btn-small blue">
        Add New
        <i class="material-icons">add</i>
      </button>
      <button id="search" class="btn btn-small teal"><i class="material-icons">search</i></button>
    </div>
    <div class="row">
      <table class="table">
        <thead>
          <tr>
            <th>Product Name</th>
            <th>Harga</th>
            <th>Satuan</th>
            <th>isian</th>
            <th>Jumlah</th>
            <th>Sub total</th>
          </tr>
        </thead>
        <tbody id="dynamic_field">
          <tr>
            <td>
              <input type="text" name="product_name" id="product_name" placeholder="Nama barang">
            </td>
            <td>
              <input type="text" name="sales_price" id="sales_price">
            </td>
            <td>
              <input type="text" name="product_unit" id="product_unit">
            </td>
            <td>
              <input type="text" name="qty" id="qty">
            </td>
            <td>
              <input type="text" name="quantity" id="quantity" value="0">
            </td>
            <td>
              <input type="text" name="subtotal" id="subtotal" disable="true" value="0">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="row">
      <h4><strong>Billing</strong></h4>
      <form action="">
        <div class="row">
          <div class="input-field col s4">
            <label>Grand Total</label>
            <input type="text" name="grandtotal" id="grandtotal">
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4">
            <label>Date</label>
            <input type="text" name="created_at" id="created_at" value="<?php echo Date('d/m/y'); ?>">
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4">
            <input type="submit" value="Submit" class="btn btn-medium blue">
          </div>
        </div>
      </form>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
  function search() {
    $.ajax({
      type: "POST",
      url: "<?php echo base_url('salescontroller/search'); ?>",
      data: { product_name: $('#product_name').val() },
      dataType: "json",
      success: function(response) {
        if (response.status == "success") {
          $("#product_name").val(response.product_name);
          $("#product_unit").val(response.product_unit);
          $("#sales_price").val(response.sales_price);
          $("#qty").val(response.qty);
        } else {
          alert("data not found")
        }
      }
    })
  }
  var i = 1;
  $(document).on('click', '.delete_item', function(){
    var id = $(this).attr("id");
    $('#row'+id+'').remove();
  })
  $('input[name="quantity"]').keyup(function(){
    var sales_price = $('input[name="sales_price"]').val();
    var quantity = $(this).val();
    $('input[name="subtotal"]').val(sales_price*quantity);
  })
  $(document).ready(function(){
    $('#search').click(function(){
      search();
    })
    $('#add_items').click(function(){
      i++;
      $('#dynamic_field').append('<tr  id="row'+i+'" >'+
        '<td><input type="text" id="product_name" name="product_name" placeholder="Nama barang"/></td>'+
        '<td><input type="text" name="product_unit"/></td>'+
        '<td><input type="text" name="sales_price"/></td>'+
        '<td><input type="text" name="qty"/></td>'+
        '<td><input type="text" name="quantity" value="0"/></td>'+
        '<td><input type="text" name="subtotal" value="0"/></td>'+
        '<td><a href="#" class="btn btn-small red delete_item" id="'+i+'"><i class="material-icons">delete</i></a></td>'+
      '</tr>');
    })
  })
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  });
</script>

------------------------- Controller -------------------- <?php class SalesController extends CI_Controller { public function __construct(){ parent::__construct(); $this->load->model('Product'); } public function index() { $data['title'] = "Sales"; $this->load->view('layouts/header', $data); $this->load->view('sales/index', $data); } public function search() { $product_name = $this->input->post('product_name'); $product = $this->Product->viewByName($product_name); if (!empty($product)) { $callback = array( 'status' => 'success', 'product_name' => $product->product_name, 'product_unit' => $product->product_unit, 'sales_price' => $product->sales_price, 'qty' => $product->qty ); } else { $callback = array('status' => 'failed'); } echo json_encode($callback); } } ?>

------------------------- Model -------------------- <?php class Product extends CI_Model { function save($data, $table){ $this->db->insert($table, $data); } function get_all_products($number, $offset) { $query = $this->db->get('products', $number, $offset); return $query->result(); } function count_product() { return $this->db->get('products')->num_rows(); } function edit($where, $table) { return $this->db->get_where($table, $where); } function update_product($where, $data, $table) { $this->db->where($where); $this->db->update($table, $data); } function viewByName($product_name){ $this->db->where('product_name', $product_name); $result = $this->db->get('products')->row(); return $result; } } ?>