javascript function inside another function isn’t working

Currenty i’m working on php dynamic row but i need to change satuanbahan value based on id_bahan dropdown but it isn’t working inside the addrow function. The satuanbahan wont show it’s value. Is there any ways to make it work

$(document).ready(function () {

var counter = 0;

$("#addrow").on("click", function () {

    var newRow = $("<tr> id='row"+ counter +"'");
    var cols = "";

    cols += '<td><select name="id_bahan[]" id="id_bahan" class="form-control"><option value="-" selected="selected">-</option><?php
                        $q=mysqli_query($conn,"SELECT id_bahan, nama,satuan FROM tblbahan group by id_bahan ORDER BY id_bahan asc");
                        while($data2=mysqli_fetch_array($q)) {
                      
                      echo '<option value="'.$data2[0].'" data-satuan="'.$data2[2] .'">'. $data2[1]. '</option>';
                      
                      }
                      ?>
                  </select></td>';
    cols += '<td><input type="number" name="takaran[]" value="" id="takaran" class="form-control"/></td>';
    cols += '<td><input type="text" name="satuanbahan" value="" id="satuanbahan" class="form-control" readonly="true"/></td>';

    cols += '<td><a type="button" class="ibtnDel btn btn-md btn-danger "><i class="fas fa-fw fa-trash"></i></a></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;

    $('#id_bahan').change(function() {
        selectedOption = $('option:selected', this);
        $("#satuanbahan").val( selectedOption.data('satuan') );
    });


});