How to display Kendo Template information from detailRow

I am using a kendo grid "detailTemplate" almost identical to this example: https://demos.telerik.com/kendo-ui/grid/detailtemplate

When my expand icon is clicked, I fetch the data and display another kendo grid just like the orders tab in the above example.

This is working well, as expected.

The problem.

When I fetch the detail data, I also want to display additional info right next to the detail grid. This additional info does not belong in the grid, but I do want it to display next to the grid.

I am doing the following in the detail grid datasource.

My Psuedo Code
<script id="template-details">
  <div class="myDetailGrid"></div>
  <div id="additionalInfoTemplate"></div>
</script>
 ...
 detailRow.find(".myDetailGrid").kendoGrid({
 dataSource: {
    transport: {
            read: function(options) {
                axios.post(myUrlString, payloadContent).then(function (response) {
                    options.success(response.data.orders);

                    var templateString = `<div>#: additionalInfo1 #</div><div>#: additionalInfo2 #</div> ....`
                    var template = kendo.template(templateString);
                    var result = template(response.data.additionalInfo);
                    $("#additionalInfoTemplate").html(result); 
                })
            ...
            }
        }
        ...

Here is what happens:

-my parent grid displays fine

-when the expand icon is clicked, the details grid displays fine. the detail grid always displays fine when any row is expanded

-The additional info will display fine for the first detail choosen,

-But when the next detail is expanded, the detail grid is correct but the additional info template data is wrong. It's the previous detail's additional info or blank.

-The additional info is never right after the first row is expanded.

How can I display additional information correctly in this situation.

Solution

Like @NigelK said, you shouldn't add multiple elements with same id to your DOM. I will suggest something to fix it, but I'm not sure as I can't test it. Here it goes:

Change the id attribute to class in your div:

  <div class="additionalInfoTemplate"></div>

Bind the detailRow to your read function in order to have its reference inside the post() callback:

  read: function(detailRow, options) {
      axios.post(myUrlString, payloadContent).then(function (detailRow, response) {
          ...
          $(detailRow).find(".additionalInfoTemplate").html(result); 
      }.bind(null, detailRow))
  }.bind(null, detailRow)