How to dynamically add and remove a same div block which have multiple input elements basis on selected dropdown multiple values?

I want to add following code block on dropdown value select and unselect. If select a role then append role's custom fields in current form and remove code block of custom fields for role which unselected. We can select multiple roles in dropdown. I want to preserve inputted values of dynamically generated fields so only want to append and remove custom fields, not repopulates all custom fields again and again.

Please suggest what is best for achieve this. If provide any code sample or working jsfiddle etc example will be good for me.

<"div v-if="rolesCustomFields" v-for="(rolesCustomField, i) in rolesCustomFields" :key="i" :id="'role-'+rolesCustomField.role_id">
    <template v-if="rolesCustomField.form_custom_field.form_field_type.name == 'text'">
        <b-form-group :label-for="getCustomFieldId(rolesCustomField)" :label="rolesCustomField.form_custom_field.field_name">
            <b-form-input :id="getCustomFieldId(rolesCustomField)" v-model="form['roleFormCustomFields' + rolesCustomField.id + '-' + rolesCustomField.form_custom_field.field_code]" type="text" :placeholder="'Enter ' + rolesCustomField.form_custom_field.field_name" :required="isRequiredField(rolesCustomField)" :class="{ 'is-invalid': isInvalidField(rolesCustomField) }"></b-form-input>
            
            <b-form-invalid-feedback :id="getCustomFieldId(rolesCustomField)+'-live-feedback'">This is a required field.</b-form-invalid-feedback>

            <has-error :form="form" :field="getCustomFieldId(rolesCustomField)"></has-error>
        </b-form-group>
    </template>

    <template v-if="rolesCustomField.form_custom_field.form_field_type.name == 'email'">
        <b-form-group :label-for="getCustomFieldId(rolesCustomField)" :label="rolesCustomField.form_custom_field.field_name">
            <b-form-input :id="getCustomFieldId(rolesCustomField)" v-model="form['roleFormCustomFields' + rolesCustomField.id + '-' + rolesCustomField.form_custom_field.field_code]" type="email" :placeholder="'Enter ' + rolesCustomField.form_custom_field.field_name" :required="isRequiredField(rolesCustomField)" :class="{ 'is-invalid': isInvalidField(rolesCustomField) }"></b-form-input>
        
            <b-form-invalid-feedback>This is a required field.</b-form-invalid-feedback>

            <has-error :form="form" :field="getCustomFieldId(rolesCustomField)"></has-error>
        </b-form-group>
    </template>
    <template v-if="rolesCustomField.form_custom_field.form_field_type.name == 'textarea'">
        <b-form-group :label-for="getCustomFieldId(rolesCustomField)" :label="rolesCustomField.form_custom_field.field_name">
            <b-form-textarea :id="getCustomFieldId(rolesCustomField)" v-model="form['roleFormCustomFields' + rolesCustomField.id + '-' + rolesCustomField.form_custom_field.field_code]" rows="3" :placeholder="'Enter ' + rolesCustomField.form_custom_field.field_name" :required="isRequiredField(rolesCustomField)" :class="{ 'is-invalid': isInvalidField(rolesCustomField) }"></b-form-textarea>
        
            <b-form-invalid-feedback>This is a required field.</b-form-invalid-feedback>

            <has-error :form="form" :field="getCustomFieldId(rolesCustomField)"></has-error>
        </b-form-group>
    </template>
    <template v-if="rolesCustomField.form_custom_field.form_field_type.name == 'dropdown'">
        <b-form-group :label-for="getCustomFieldId(rolesCustomField)" :label="rolesCustomField.form_custom_field.field_name">
            <b-form-select :id="getCustomFieldId(rolesCustomField)" v-model="form['roleFormCustomFields' + rolesCustomField.id + '-' + rolesCustomField.form_custom_field.field_code]" :required="isRequiredField(rolesCustomField)" :class="{ 'is-invalid': isInvalidField(rolesCustomField) }">
                <template v-slot:first>
                    <b-form-select-option value="">- Select {{rolesCustomField.form_custom_field.field_name}} -</b-form-select-option>
                </template>

                <b-form-select-option v-for="custom_field_option_value in rolesCustomField.form_custom_field.form_custom_field_option_values" :value="custom_field_option_value.id" :key="custom_field_option_value.id">{{ custom_field_option_value.value }}</b-form-select-option>
            </b-form-select>

            <b-form-invalid-feedback>This is a required field.</b-form-invalid-feedback>

            <has-error :form="form" :field="getCustomFieldId(rolesCustomField)"></has-error>
        </b-form-group>
    </template>
</div>