Default value for select2 do not pass on first click

Click event on task list, when edit button clicked modal box appears and populate data from ajax call.

First time I click edit button it show first option, but when 2nd click it show the corrected one even when I click on other row. Staff show just right, the problem is on phase.

This is my final solution:

   $('#task_table').on('click', '.edit_task', function() {

    var task_id = $(this).attr('data');
    $('#modal-task-edit').modal('show');

    $.ajax({

        type: 'ajax',
        method: 'get',
        url: '<?php echo base_url() . 'Task/get_task' ?>',
        data: {
            task_id: task_id
        },
        async: false,
        dataType: 'json',
        success: function(data) {

            $('input[name=start_date]').val(data.start_date);
            $('input[name=project_id]').val(data.project_id);
            $('input[name=task_id]').val(data.task_id);
            $('input[name=end_date]').val(data.end_date);
            $('input[name=task_name]').val(data.task_name);
            $("textarea#task_description").val(data.task_description);
            let phases = data.phases.split(",");
            all_phase(result => {
                let arr_all = [];
                let all = Object.keys(result).map((key) => [result[key]]);
                for (let i of all) {
                    arr_all[i[0]['phase_id']] = i[0]['phase_name']
                }
                for (let i = 0; i < phases.length; i++) {
                    $('#phase').append('<option value=' + phases[i] + '>' + arr_all[phases[i]] + '</option>');
                }
            });
            $('#phase').val(data.phase_id).trigger('change');
            $('#pic').val(data.staff_id).trigger('change');
            }
    });
});

Hours of debugging doesn't work