How to position Template.dynamic?

Hi guys, kind regards to everyone in the meteor community, as a hobby I have resumed development with meteor and I want to learn how to use BlazeLayout and Template.dynamic in a good way.
I have used Template.dynamic normally as some examples show and it works fine until I have tried to use it in a specific place in the DOM, ie; insert a template in the ‘X’ and ‘Y’ coordinates, but when clicking the activator, only this template remains in the DOM, it removes the other templates.
I have several buttons and each one of them must insert a different template when activated, but as I mentioned earlier, this template does not get in the position I want and it deactivates the other templates.
My code is very simple:

<template name=main>
{{>sidebar}}
{{>content}}
</template>

<template name=content>
     <button id=1><button>
     <button id=2><button>

      <div class="w3-container" style="margin-left:350px; margin-right:350px;">
        {{>Template.dynamic template=subcontent}}	
      </div>
</template>

<template name=content-1> ... </template>
<template name=content-2> ... </template>

content.js:

import '.../content.html';

Template.content.events({
    'click #1':function(event){
    event.preventDefault();
    BlazeLayout.render('content',{subcontent:'content-1'});
    },
    'click #2':function(event){
    event.preventDefault();
    BlazeLayout.render('content',{subcontent:'content-2'});
    },
});

clicking on either button leaves only that template in the entire DOM, removing the sidebar. I want this new inserted template to appear below the buttons, how can I do this?

I know that there is react and is better at this, but I want to know how to do it with Blaze since it is a challenge for me, I thank you in advance for the help you can give me

Have you tried with a ReactiveVar?

Template.content.onCreated(function(){
 this.subcontent = new ReactiveVar('content-1');
});
Template.content.helpers({
 subcontent(){
  return Template.instance().subcontent.get();
 }
};
Template.content.events({
 'click #1'(event, instance) {
  instance.subcontent.set('content-1')
 },
 'click #2'(event, instance) {
  instance.subcontent.set('content-2')
 }
})

I think the issue here is that BlazeLayout removes everything from the page before rendering.
This is because it’s supposed to be a full-page layout manager.

In your case that means that main is your layout and you want to drill the data down to where it’s needed like so:

<template name=main>
{{>sidebar}}
{{>content subcontent=subcontent}}
</template>

<template name=content>
     <button id=1><button>
     <button id=2><button>

      <div class="w3-container" style="margin-left:350px; margin-right:350px;">
        {{>Template.dynamic template=subcontent}}	
      </div>
</template>

<template name=content-1> ... </template>
<template name=content-2> ... </template>

Then call BlazeLayout.render('main', {subcontent:'content-2'}). It will render main with subcontent set to content-2, which will get passed into content so it can be used in Template.dynamic

@coagmano @jamgold I tried with their guides, but they still didn’t work, try something different and using the helpers, but I know it’s not the best way to do it

I managed to do some of the functionality I wanted with
{{> UI.dynamic template = myHtml}}

JS:

Template.content.helpers({
     myHtml(){
         return subcontent; //new template include
     }
});

This function does not disable me in the main template and I fulfill the objective of adding a template above the buttons, I am not sure if it is the best way for a good functionality in meteor but it served me and I hope it will serve other colleagues.

@coagmano @jamgold As always, I thank you for your collaboration, and your examples helped me to clarify some doubts regarding the subject.