How to solved always looping select option value from ajax

I have a data, when I update the data (using modal), select option work correctly enter image description here

When I close the modal, and I click the edit button again, something wrong with select option: enter image description here

This is my edit modal ajax:

// Function for edit modal plan schedule
    $('body').on('click', '.editPlanSchedule', function() {
        var Item_id = $(this).data('id');
        $.get("/quotation/getEditPlanSchedule" + '/' + Item_id, function(data) {
            $('.modal-title-edit').html("Edit Plan Schedule Item");
            // $('#product_plan_edit').val(data.product_plan);
            data['product_plan'].forEach(function(item, index) {
                $('#product_plan_edit').append($('<option>', {
                    value: item.productplanID,
                    text: item.productplanID
                if(data['data'].product_plan == item.productplanID){


This is the method from controller:

public function getEditPlanSchedule($id)
    $item['data'] = QuotationPlanSchedule::find($id);
    $item['product_plan'] = ProductPlan::orderby('id', 'asc')->get();
    return response()->json($item);


You have to clear all options before adding again: