How to access Asset in Fragment HTML

[#assign assetEntry = "" /]
[#assign sn = "" /]

	[#assign infoListDisplayObject = (request.getAttribute("INFO_LIST_DISPLAY_OBJECT"))! /]
	[#assign liferaySharedLayoutAssetEntry = (request.getAttribute("LIFERAY_SHARED_LAYOUT_ASSET_ENTRY"))! /]

	[#if infoListDisplayObject?has_content]
		[#assign assetEntryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService") /]

		[#assign modelClassName = infoListDisplayObject.modelClassName! /]
		[#assign resourcePrimKey = infoListDisplayObject.resourcePrimKey! /]

		[#if modelClassName?has_content && resourcePrimKey?has_content]
			[#assign assetEntry = assetEntryLocalService.getEntry(modelClassName, resourcePrimKey) /]
		[/#if]
	[#elseif liferaySharedLayoutAssetEntry?has_content]
		[#assign assetEntry = (request.getAttribute("LIFERAY_SHARED_LAYOUT_ASSET_ENTRY"))! /]
	[/#if]

[#if assetEntry?has_content && assetEntry.getAssetRenderer??]
	[#assign ddmFormValuesReader = assetEntry.getAssetRenderer().getDDMFormValuesReader() /]
	[#assign fields = ddmFormValuesReader.getDDMFormValues().getDDMFormFieldValues() /]

	
	[#list fields as field]

		[#if field.getDDMFormField().getLabel().getString(locale) == "Serial Number" ]
			[#assign sn = field.getValue().getString(locale) /]
		[/#if]

    [/#list]

[/#if]


<div class="topleft" style="max-width:400px">
	<div class="trackingdata" data-sn="${sn}">
		<div class="grid-container">
			<div class="grid-item">
				<lfr-editable id="unique-id" type="image">
					<img class="iconsize-s" id="unique-image" src="xxx">
				</lfr-editable>
			</div>

			<div class="grid-item">
				<lfr-editable id="01-title" type="text" class=""  style="">XXXX</lfr-editable>
			</div>
		</div>
		<div style="display:none;"><lfr-editable id="trackingIdholder" type="text" class="data-tracking-id">Tracking Id holder(this can be mapped)</lfr-editable></div>
    
    	<div data-sn="${sn}">This serial number is '${sn}'</div>
	</div>
</div>