Multi select is not selected when updating multiselect field in Ajax call

I am using AdminLTE 2 advanced element form multi select. When I insert a field of a form using multi select it inserts perfectly.

But when I update that multi select field using same form, the previous insert values are not selected in select input label at this moment. It is selected in dropdown and I can’t change the selected field also.

I follow this Select2 Doc

Note

ajax response is working properly

cdn, css and javascript integrated properly

I have tried these code

<div class="form-group" id="security_add">
    <label for="inputEmail3" class="col-sm-5 control-label">Select Area Name:</label>
    <div class="col-sm-7">
        <select class="form-control2 select2" multiple="multiple"  name="area_name_id[]" id="area_name_id">
             <option value="">-Selecr-</option>
             <option value="1">Bangladesh</option>
             <option value="2">USA</option>
             <option value="3">UK</option>
             <option value="4">UAE</option>
             <option value="5">Canada</option>
             <option value="6">India</option>
             <option value="7">Pakistan</option>

        </select>
    </div>
</div>

Javascript

$(document).ready( function () {

    $('.select2').select2()

} );

Ajax Update Method

$('#area_name_id').val('');

$.ajax({

    type:"post",

    url:"./cc/area.php",

    data: {
        id:                     row_id,
        conditional_value:      1
    },

    success:function(response){

        $('#area_name_id').val(responseData.tbl_area_id);
        $('#area_name_id').trigger('change');
        
    }
});

Answer

This is very simple like select2

$('#area_name_id').val('');

Replace by

var areaSelect = $('#area_name_id');

Ajax Request looks like this

$('#area_name_id').val(responseData.tbl_area_id);
areaSelect.append(responseData.area_name_id).trigger('change');