Searchbar doesn't work with a list added dynamically

Hi, I can’t solve this issue. I have a page where I add a list dynamically before to enter in the page. I’d like to have a search bar. However the searchbar doesn’t work, if I write something on it, the list disappear completely. I notice that if I write the list normally, the search bar works. Thank you in advance for your help.

this is the html function:

   <div data-name="city" class="page">
	<!-- Searchbar with auto init -->
	<form class="searchbar searchbar-init">
		<div class="searchbar-inner">
			<div class="searchbar-input-wrap">
				<input type="search" placeholder="Search">
				<i class="searchbar-icon"></i>
				<span class="input-clear-button"></span>
			<span class="searchbar-disable-button">Delete</span>

	<div class="fab fab-right-bottom fix-fab-right-bottom">
		<a href="/aziende/add/">
			<i class="icon f7-icons">add</i>

	<div class="page-content">
		<div class="row justify-content-center">
			<div class="col-100 tablet-100 desktop-auto">
		<!-- Searchbar backdrop -->
		<div class="searchbar-backdrop"></div>

				<div class="col-100 tablet-auto desktop-50">

					<div class="card">
						<div class="card-content card-content-padding">	
						<div class="row">
						<div class="row">
							<div class="block searchbar-hide-on-search">
								<p>List of the city</p>
							<div class="col-100 tablet-auto desktop-auto">
								<div class="list links-list searchbar-found" id="listCity">
										<!--here I append the list -->

			</div> <!-- ./ col -->
		</div> <!-- ./ row -->
	</div> <!-- ./ page-content -->
	<!-- Nothing found message -->
	<div class="block searchbar-not-found">
		<div class="block-inner">Nothing found</div>

this is my app.js

		name: 'city',
		path: '/city/',
		url: './pages/city/main.html',
		on: {
			pageInit: 	function(){
						addListCity(); // append dynamically the list in the div #listCity
						CitySearchBar(); // add the searcbar element


this is the search bar element

const CitySearchBar = () => {
// create searchbar
var searchbar = app.searchbar.create({
	el: '.searchbar',
	searchContainer: '#listCity',
	searchIn: '.item-title',
	on: {
		search(sb, query, previousQuery) {
			console.log(query, previousQuery);


before to search


after to search, all list disappears


Remove searchbar-init class from searchbar

I removed searchbar-init from <form class=“searchbar”> but it doesn’t change nothing