How to add a new section in Weebly template

I would like to edit a header type so that it would have 4 static sections in which the editor can drag and drop new fields.

The template has only the following at the moment;

 <div class="main-wrap">
  {{#sections}}
      <div class="container">{content}</div>
  {{/sections}}
</div>

Is there any way for me to multipy the main container like this way?

 <div class="main-wrap">
  {{#sections}}
      <div class="container">{content}</div>
  {{/sections}}
</div>

 <div class="main-wrap2">
  {{#sections}}
      <div class="container">{content}</div>
  {{/sections}}
</div>

 <div class="main-wrap3">
  {{#sections}}
      <div class="container">{content}</div>
  {{/sections}}
</div>

 <div class="main-wrap4">
  {{#sections}}
      <div class="container">{content}</div>
  {{/sections}}
</div>

I am just not sure what I should give instead of {content} for the extra ones. Because as long as they have {content} tag, it is replicating the content of the first section.

Any idea how I can make it work? My purpose is to give specific styles to each section indvidually.

Solution

First, let me point out that {{#sections}} allows you the ability to create multiple sections, by dragging the section element into the content area. Each section can have its own 'style' or background. With that there isn't really any need for separate content areas, that is unless they are not uniform areas stacked on top each other.

So, all you really need is..

 <div class="main-wrap">
  {{#sections}}
      <div class="container">{content}</div>
  {{/sections}}
</div>

That being said, if you would still like to continue with your plan, you would use unique content tags for the additional content areas including global="false". global="false" means that the content will not appear on other pages using the page type.

example {content2:content global="false"}

 <div class="main-wrap">
    <div class="container">{content}</div>
 </div>

 <div class="main-wrap2">
    <div class="container">{content2:content global="false"}</div>
 </div>

 <div class="main-wrap3">
    <div class="container">{content3:content global="false"}</div>
 </div>

 <div class="main-wrap4">
    <div class="container">{content4:content global="false"}</div>
 </div>

Note that I removed the 'sections' because I wasn't sure if you really wanted that for each area.