Цепной jquery не работает на добавленной форме

Question

Измененный jquery работает в раскрывающемся списке в первой форме ввода, но когда я добавляю ту же новую форму ввода, вторая форма не может запустить также функцию связанного jquery, если я снова добавлю новую форму ввода.

Я пытался изменить положение скрипта цепочки jquery, но все равно не может

Скрипт

<script>
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var ambil = document.getElementById("field_wrapper");
    var fieldHTML = ambil.innerHTML; //New input field html 

    var x = 1; //Initial field counter is 1

    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); //Add field html
        }
    });

    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>

<script>jQuery("#barang_id").chained("#type_id");</script>

Формы

<div id="field_wrapper" class="field_wrapper">
                <div class="form-row">
                    <div class="form-group col-md-3">
                        <select class="form-control" id="type_id" name="type_id">
                            <option value="">All</option>
                            <?php foreach($type as $types) : ?>
                                 echo '<option <?php echo $type_selected == $types->type_id ? 'selected="selected"' : '' ?> value="<?php echo "$types->type_id"?>"><?php echo "$types->type_nama"?></option>';
                            <?php endforeach ?>
                        </select>
                        <small class="form-text text-danger"><?= form_error('type_id') ?></small>
                    </div>
                    <div class="form-group col-md-3">
                        <select class="form-control" name="barang_id" id="barang_id">
                            <option value="">Please Select</option>
                            <?php foreach($barang as $bar) : ?>
                                 echo '<option <?php echo $barang_selected == $bar->type_id ? 'selected="selected"' : '' ?> class="<?php echo $bar->type_id ?> text-uppercase" value="<?php echo "$bar->barang_id"?>"><?php echo "$bar->barang_nama"?></option>';
                            <?php endforeach ?>
                        </select>
                        <small class="form-text text-danger"><?= form_error('barang_id') ?></small>
                    </div>
                    <div class="form-group col-md-2">
                        <input type="text" name="masuk_jumlah" class="form-control" id="masuk_jumlah">
                        <small class="form-text text-danger"><?= form_error('masuk_jumlah') ?></small>
                    </div>

                    <div class="form-group col-md-3">
                        <input type="text" name="keterangan" id="keterangan" class="form-control">
                        <small class="form-text text-danger"><?= form_error('keterangan') ?></small>
                    </div>

                    <a href="javascript:void(0);" class="remove_button text-danger text-decoration-none"><i class="fa fa-minus-square" style="font-size:24px"></i></a>
                </div>
            </div>
<a href="javascript:void(0);" class="add_button" title="Add field">( + )</a>
                <button type="submit" name="tambah" class="btn btn-primary float-right">Simpan</button>

Я хочу, чтобы цепочечная функция jquery запускалась при каждой форме ввода, а не только при первой форме ввода