Why in Tree folder I make by sample I got unexpected results?

In Laravel 8 app with tailwindcss 2 I basing on https://codepen.io/ScottWindon/pen/RwabppB Tree folder I make selection of states/city of current country. Reading states/cities from request I create Tree folder in dialog modal where user will be able to select state firstly and city withing selected state.

But I encounetered some problems as coding like :

                <div class="overflow-y-auto modal-content">
                    <div class="m-1 p-1">
                        <ul class="text-gray-100 bg-green-900">
                            <template x-for="(selectedCountryLevel,i) in selectedCountryStates">
                                <li x-html="renderLevel(selectedCountryLevel,i)"></li>
                            </template>
                       </ul>
                    </div>
                </div>
...
                renderLevel: function (obj, i) {
                    let ref = 'l' + Math.random().toString(36).substring(7);
                    console.log('renderLevel obj::')

                    let html = `<a href="#" class="block px-5 py-1 hover:font-bold" :class="{'has-children':selectedCountryLevel.children}" x-html="(selectedCountryLevel.children?'<i class=\\'mdi mdi-folder-outline text-orange-500\\'></i>':'<i class=\\'mdi mdi-file-outline text-gray-600\\'></i>')+' '+selectedCountryLevel.code+' '+selectedCountryLevel.title + ' ' + selectedCountryLevel.level_count" ${obj.children ? `x-on:click.prevent="toggleLevel($refs.${ref})"` : 'x-on:click.prevent="selectCity(event, selectedCountryLevel.code, selectedCountryLevel.title); return false;"'}></a>`;

                    if (obj.children) {
                        html += `<ul style="display:none;" x-ref="${ref}" class="pl-5 pb-1 transition-all duration-1000 opacity-0">
                            <template x-for='(selectedCountryLevel,i) in selectedCountryLevel.children'>
                                <li x-html="renderLevel(selectedCountryLevel,i)"></li>
                            </template>
                        </ul>`;
                    }

                    return html;
                },

                selectCity: function (event, code, cityName) {
                    console.log('selectCity event::')
                    console.log(event)

                    console.log('selectCity code::')
                    console.log(code)

                    console.log('selectCity cityName::')
                    console.log(cityName)
                    this.autocompleteSearchSelectedCity = cityName
                    event.preventDefault()
                    event.stopPropagation()
                    event.cancelBubble = true
                    return false
                },

I got modal with states/cities but I also got error :

alpine.js:122 Uncaught ReferenceError: selectedCountryLevel is not defined
    at eval (eval at tryCatch.el.el (alpine.js:144), <anonymous>:3:70)
    at tryCatch.el.el (alpine.js:144)

at the end of the circle and I see in the browsers console : https://prnt.sc/119fubw

I do not know if that error is critical, anyway I want to fix it

Next opening list cities inside of state I select some city and selectCity function must be called,as I have condition :

{obj.children ? `x-on:click.prevent="toggleLevel($refs.${ref})"` : 'x-on:click.prevent="selectCity(event, selectedCountryLevel.code, selectedCountryLevel.title); return false;"'}

and this function is clicked but next renderLevel is called : https://prnt.sc/119g048 and lsit of states is closed...

How can I fix these errors?

MODIFIED BLOCK : I uploaded this app on server. Please check this issue libe : open http://tads-back.my-demo-apps.tk/admin/ads/1/ad_locations/1/edit login credentails would be opened with filled credentials - just click submit. Next click on the button right from the “Country” input. It has “United Kingdom” value by default, so so states of United Kingdom will be opened, with error in the console : https://prnt.sc/11dsez2

After that I click on “Scotland” I want to select one of items (Say "Glasgow") : https://prnt.sc/11dsx7t, but results unexpected, I see that after calling of selectCity method renderLevel is triggered, (I can not catch why) and all tree is closed again : https://prnt.sc/11dt2he

How it can be fixed?

Thanks!

from Why in Tree folder I make by sample I got unexpected results?