select2: selecting previous selected option after closing modal

I have a problem regarding select2. What I am working for is that I wanted to get the previous selected option from select2 after closing a modal. But the problem is that, I can't get it right! I think there's something wrong is the jQuery, but I can't figure it out.. What I;m referring to is from jsfiddle.net/kpecoj2q

What is working fine:

1. When the user chose category for the first time (no modal should pop up)
2. when the user wanted to choose other category (modal pop up)
3. When the user click 'Back' button from the model it call the callBack() function through onclick (I think so)

What is not working:

1. The dropdown function is not reverted to previous selected dropdown after the user clicked the 'Back'

<script>
        var previous;
        var lastValue;

//here I'm setting the modal function
        function openModal() {
            $("#kategori-id").on("change", function (e) {
                $modal = $('#otherCat');
                $modal.modal('show');
                });
        }

//this function works when I close the modal by using onclick="callBack();"
        function callBack() {
                $("#kategori-id").val(previous);
            }

        $(document).ready(function(){

//this is when I select an option from select2
            $('#kategori-id').on('focus', function (e) {
                previous = $(this).select2("val");
                console.log(previous);
                @this.set('informationCat.id_kategori', previous);
            });

//this is to bind the modal function and the after the first option is selected
            $("#kategori-id").bind("click", function(e) {
            lastValue = $(this).select2("val");
            }).bind("change", function(e) {
            openModal();
            });
        });

1. The Modal popped up

<x-modal id="otherCat" title="Kategori Kes" size="md" icon="fas fa-exclamation-triangle" >
    <x-slot name="body">
        <x-card>
            <x-slot name="body">
                <p> Hello there </p>
             </x-slot>
         </x-card>
      </x-slot>
      <x-slot name="footer">

//the callBack() function is called using onclick
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="callBack();">Back</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Go On</button>
      </x-slot>
</x-modal>

1. This is the select2 code

<x-forms.select wire:model="informationCat.id_kategori" id="kategori-id" label="Kategori">
     <x-slot name="option" >
         @foreach ($senaraiKatKes as $item)
             <option value="{{$item->id}}" >{{$item->nama}}</option>}}
          @endforeach
     </x-slot>
</x-forms.select>