xpages dialog with materialize tags

dialog.xml

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xe="http://www.ibm.com/xsp/coreex">

	<xp:this.resources>
		<xp:script
			src="/materialize-tags/dist/js/materialize-tags.min.js"
			clientSide="true">
		</xp:script>
		<xp:script
			src="/materialize/dist/js/materialize.min.js"
			clientSide="true">
		</xp:script>
		<xp:styleSheet
			href="/materialize-tags/dist/css/materialize-tags.min.css"></xp:styleSheet>
		<xp:styleSheet
			href="/materialize-css/dist/css/materialize.min.css"></xp:styleSheet>
	</xp:this.resources>

	<div
		class="container">
		<xp:repeat
			id="repeat1"
			var="row"
			rows="30">
			<xp:this.value><![CDATA[#{javascript:var rows = [];

rows.push( { id : '1', cities: ['Enschede', 'Deventer'] } );
rows.push( { id : '2', cities: ['Enschede', 'Amsterdam'] } );
rows.push( { id : '3', cities: ['Rotterdam', 'Bathmen'] } );

return rows;
}]]></xp:this.value>

			<div>

				<xp:text
					escape="true"
					id="computedField1">
					<xp:this.value><![CDATA[#{row.id}]]></xp:this.value>
				</xp:text>

				<xp:button
					value="open dialog"
					id="button1">
					<xp:eventHandler
						event="onclick"
						submit="true"
						refreshMode="partial"
						refreshId="dialog1">
						<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show();}]]></xp:this.action>
					</xp:eventHandler>
				</xp:button>
				<xe:dialog
					id="dialog1"
					title="Tags">

					<xe:dialogContent
						id="dialogContent1">


						<xp:inputText
							id="inputText2"
							value="#{row.cities}"></xp:inputText>


						<xp:scriptBlock
							id="scriptBlock2">


							<xp:this.value><![CDATA[x$("#{id:dialog1}").find("input[type=text]").materialtags();]]></xp:this.value>
						</xp:scriptBlock>

					</xe:dialogContent>
				</xe:dialog>

			</div>

		</xp:repeat>

	</div>
</xp:view>