Set content of sub item in select event of a panelbar item

[Hiren]

Hello,

On select event of a panel bar item, I want to make an ajax call and set the content for sub item.

I started with the sample code as shown below. The issue is, it only sets the content for 1st item.

Thanks for your time and help.

--
Hiren

 <script id="resultstemplate" type="text/x-kendo-template">
       <ul id="resultsPanelBar">
           # for (var i = 0; i < data.length; i++) { #
                <li>#= data[i].name #<br/>#= data[i].addressLine1 #<br/>#= data[i].addressLine2 #, #= data[i].phone #
                                   <span style="display:none">|#= data[i].comprehensiveProviderId #</span>
                             <ul  id ="resultDetails"></ul>
                </li>
        # } #
       </ul>
    </script>    
function onSelect(e) {
        var selectedText = $(e.item).find("> .k-link").text();
        var splitSelectedText = selectedText.split('|');
        console.log("selectedText : " + selectedText);
                 console.log("Comprehensive Provider ID  : " + splitSelectedText[1]);
                
              $("#resultDetails").html("<li>"+splitSelectedText[1] +"</li>");
             }
               

[Hiren]

The issue has been resolved. Appended the index to the id of ul created and in onSelect method, used the same index to populate the content of sub list item.

Thanks.

--
Hiren