How to get array id in ajax append?

i have an appended, there a selectbox with 2 textbox

first the selectbox will selecting an item, after on change, it will set all the textbox with data based on selected. my select option calling data from database array $data.

this is my ajax code

 function getBarang(val) {
  
    $.ajax({
        url: baseurl + "JSON/getBarang",
        // url: baseurl + "JSON/getVal" + val,
        type:"POST",
        data:{"get_barang":val},
        dataType:"JSON",
        success:function(data){
           
            $('#harga_jual').val((data[0].harga_jual));
            $('#stock_sisa').val((data[0].stock_sisa));

        }
    });
}

this is my form

echo '<select name="barang[]" id="barang-'.$row.'" class="s2barang form-control"  onchange="getBarang(this.value)">';
                            
echo (isset($dBarang->id_barang)) ? '<option value="' . $dBarang->id_barang.'">' . $dBarang->nama_barang . '</option>' : '';
echo                    '   </select> ';    
                            
echo '
    <input type="text" class="form-control" name="stock_sisa" id="stock_sisa">
    <input type="text" class="form-control" name="harga_jual" id="harga_jual">

lets pass about query data, because its worked. and this is my view as result

my second textbox not working, pls help me, thanks

Edited: Let me explain more. the target is textbox stock sisa, and textbox harga_jual the $dBarang created like this, $row just like $i=0, for cheching last data on database

 $dataBarang = $this->m_db->getDataWhere("v_pembelian_detail","id_pembelian","'$id_p' ORDER BY id_pembelian_detail");
        $dataBarang = (empty($dataBarang)) ? [''] : $dataBarang;

        foreach ($dataBarang as $dBarang) 
        {

Answer

You can pass this as well inside your function where this refer to current select-box where change has been taken place. Then , using this you can use $(el).closest('.outer').find('.harga_jual').. to add input values to required inputs only.

Demo Code :

//just for demo..
var data = [{
  "harga_jual": "soemthing",
  "stock_sisa": "soemthing1"
}]

function getBarang(val, el) {

  /*$.ajax({
    url: baseurl + "JSON/getBarang",
    // url: baseurl + "JSON/getVal" + val,
    type: "POST",
    data: {
      "get_barang": val
    },
    dataType: "JSON",
    success: function(data) {*/
  //get closest div > get input add value there..
  $(el).closest('.outer').find('.harga_jual').val(data[0].harga_jual);
  $(el).closest('.outer').find('.stock_sisa').val(data[0].stock_sisa);

  /* }
  });*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--add sme outer div-->
<div class="outer">
  <select name="barang[]" id="barang-'.$row.'" class="s2barang form-control" onchange="getBarang(this.value ,this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="text" class="form-control stock_sisa" name="stock_sisa">
  <input type="text" class="form-control harga_jual" name="harga_jual">
</div>
<div class="outer">
  <select name="barang[]" id="barang-'.$row.'" class="s2barang form-control" onchange="getBarang(this.value ,this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="text" class="form-control stock_sisa" name="stock_sisa">
  <input type="text" class="form-control harga_jual" name="harga_jual">
</div>
<div class="outer">
  <select name="barang[]" id="barang-'.$row.'" class="s2barang form-control" onchange="getBarang(this.value ,this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="text" class="form-control stock_sisa" name="stock_sisa">
  <input type="text" class="form-control harga_jual" name="harga_jual">
</div>

Advertisement

Answer