Bootstrap Tabs as Hugo Shortcodes -

i trying create shortcode bootstrap tabs. have following html structure,

<nav class="nav nav-tabs" id="mytab" role="tablist">   <a class="nav-item nav-link" id="{{ .get `id` }}-tab" data-toggle="tab" href="#{{ .get `id` }}" role="tab" aria-controls="{{ .get `id` }}">       {{ .get "title" }}   </a> </nav> <div class="tab-content" id="nav-tabcontent">   <div class="tab-pane fade" id="{{ .get `id` }}" role="tabpanel" aria-labelledby="{{ .get `id` }}-tab">     {{ .inner }}   </div> </div> 

the structure contains hugo placeholder. inner part of code, is,

  <a class="nav-item nav-link" id="{{ .get `id` }}-tab" data-toggle="tab" href="#{{ .get `id` }}" role="tab" aria-controls="{{ .get `id` }}">       {{ .get "title" }}   </a> 

is required multiple times along corresponding content div is,

  <div class="tab-pane fade" id="{{ .get `id` }}" role="tabpanel" aria-labelledby="{{ .get `id` }}-tab">     {{ .inner }}   </div> 

now problem have pass id argument of inner structure , should detached parent. should able use shortcode in following way:

{% tabs %}     {% tab id = "tab-1" title = "tab one" %}         content in tab 1     {% \tab %}     {% tab id = "tab-2" title = "tab two" %}         content in tab 2     {% \tab %} {% \tabs %} 

how can achieve this?