Kendo nested listview Error

[Rachit]

I am trying to create an nested listviews but getting error in console when in .name of nested list view. Faced similar issue while creating nested grids

error in console:    jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #inner#=id#
    at fa.error (jquery.min.js:2:12750)
    at fa.tokenize (jquery.min.js:2:18803)
    at fa.select (jquery.min.js:2:21611)
    at Function.fa [as find] (jquery.min.js:2:7337)
    at n.fn.init.find (jquery.min.js:2:24126)
    at new n.fn.init (jquery.min.js:2:24693)
    at n (jquery.min.js:2:406)
    at HTMLDocument.<anonymous> (NCRFgfUserScreen:1138:3929)
    at i (jquery.min.js:2:27466)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
fa.error @ jquery.min.js:2
fa.tokenize @ jquery.min.js:2
fa.select @ jquery.min.js:2
fa @ jquery.min.js:2
find @ jquery.min.js:2
n.fn.init @ jquery.min.js:2
n @ jquery.min.js:2
(anonymous) @ NCRFgfUserScreen:1138
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2

below is my code.

<div id="Lots">
    @(Html.Kendo().ListView<Fellowship.Models.NCRPlantLot>()
    .Name("outerListView") // Use a unique name for the outer ListView
    .TagName("div")
    .Deferred()
    .DataSource(dataSource => dataSource
        .PageSize(8)
        .Model(model => {
            model.Id(p => p.id);
            model.Field(p => p.lot_number);
            model.Field(p => p.po_number);
            model.Field(p => p.quantity_affected);
            model.Field(p => p.quantityReturn_to_supplier);
        })
        .Create(create => create.Action("Editing_Create", "NCRData"))

        .Read(read => read.Action("ExampleData", "NCRData", new { id = "#=id#" }))
        .Update(update => update.Action("ExampleData", "NCRData"))
        .Destroy(destroy => destroy.Action("ExampleData", "NCRData"))

    )
    .Pageable()
    .ClientTemplateId("template") // Replace "template" with the ID of the template for the outer ListView
    .Editable()
)
    <!-- Template for Outer ListView (template) -->
    <script type="text/x-kendo-tmpl" id="template" nonce="@Application_Nonce">
    <div class="lot-view k-widget">
                <div class="task">
            @(Html.Kendo().ListView<Fellowship.Models.NCRPoDetails>()
                .Name("inner#=id#") // Use the generated unique identifier for each inner ListView
                .TagName("div")
                .Deferred()
                .DataSource(dataSource => dataSource
                    .PageSize(5)
                    .Read(read => read.Action("ExampleData2", "NCRData"))
                    .Model(model => {
                        model.Id(p => p.id);
                        model.Field(p => p.PO_Number);
                        model.Field(p => p.quantity);
                    })
                )
                .Pageable()
                .ClientTemplateId("inner") // Replace "template2" with the ID of the template for the inner ListView (if you haven't changed the ID, it should be fine as is)
                .Editable()

            )

        </div>
        <dl>
            <dt>Lot Number</dt>
            <dd>#:lot_number#</dd>
            <dt>Po Number</dt>
            <dd>
                # if (data.po_number && data.po_number.length > 0) { #
                    <p>#:data.po_number.join(', ')#</p>
                # } else { #
                    <p>No PO numbers available</p>
                # } #
            </dd>
            <dt>Quantity affected</dt>
            <dd>#:quantity_affected#</dd>
            <dt>quantityReturn_to_supplier</dt>
            <dd>#:quantityReturn_to_supplier#</dd>
        </dl>
        <div class="edit-buttons">
            <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#"><span class="k-button-icon k-icon k-i-close"></span></a>
            <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#"><span class="k-button-icon k-icon k-i-edit"></span></a>
        </div>

        <!-- Nested ListView (inner ListView) -->



        </div>

    </div>
    </script>
    <script nonce="@Application_Nonce">

    </script>
    <!-- Template for Inner ListView (template2) -->
    <script type="text/x-kendo-tmpl" id="inner" nonce="@Application_Nonce">
        <div class="inner-lot-view ">
            <dl>
                <dt>Lot Number</dt>
                <dt>Po Number</dt>
                <dd>
                    jn kj k.,m m,nklm.
                </dd>
                <dt>Quantity affected</dt>
            </dl>
            <div class="edit-buttons">
                <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#"><span class="k-button-icon k-icon k-i-close"></span></a>
                <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#"><span class="k-button-icon k-icon k-i-edit"></span></a>
            </div>
        </div>
    </script>




</div>
<div class="form-group row">
    @*<a id="add-new-button" role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-add-button" href="#"><span class="k-button-icon k-icon k-i-add"></span>Add new record</a>*@

    <button id="add-new-button" type="button" class="btn btn-primary k-add-button" style=" width: 10%; height: 1.5em;"> Add Lot</button>
</div>