在 select 特定值之后销毁日期选择器

destroy datepicker on after select sepesific value

我想在更改 select 选项后删除我的代码中的 class datepicker,但它无法正常工作 这是我的代码

 <?php for ($i = 0; $i < $anak; $i++) {
            # code...
            $b = $i + 1;
        ?>
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary"><?= 'Detail ' . $b ?></h6>
                </div>
                <div class="card-body">

                    <div class="form-row">
                        
                        <div class="form-group col-lg-3">
                            <label for="identitas">Type ID</label>
                            <select class="custom-select my-1 mr-sm-2 idanak select2" name="type">
                                <option></option>
                                <?php foreach ($kia as $key => $value) {
                                ?>
                                    <option value="<?= $value['cardtype_id'] ?>"><?= $value['cardtype_name'] ?></option>

                                <?php } ?>
                            </select>
                        </div>

                        <div class="form-group anak col-lg-3">
                            <label for="identitas">Data</label>
                            <input name="vale[]" type="text" class="form-control classforval datepicker" placeholder="Masukkan Tanggal Lahir" required>
                        </div>
                        

                    </div>


                </div>
            </div>
        <?php } ?>
    ```

this my jquery 

$(文档).ready(函数() {

    $('.idanak').on('change', function() {
        var val = $(this).find("option:selected").text()
        if (val==='KIA') {
           $('.classforval').datepicker('destroy');
           
        }

    })
})

but it destroy all datepicker, but i want only in the same card body to be destroy
any idea ?
$(this).parents(".form-group").next().find(".classforval").datepicker('destroy');

jQuery Tree Traversal