Control multiple tab-contents with one nav-tabs

Here I update your jsfiddle

I add the data-target attribute to a-elements and change ids in second tab-content

I modified this lines,

Yours:

<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a>  </li>

My update:

<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a>  </li>

And the second tab-content, Yours:

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

My update:

<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="home_else">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile_else">
        <p>Content 2.</p>
    </div>
</div>

You should just use a class instead. I just was working on Bootstrap 3 tabbed content inside a modal window. Was trying to get the modal window to open to the correct tab, but I needed two tabs to open, one for the modal header, and one for the content, with extra nab tabs in the footer.

I used a class and it worked. So, change <div class="tab-pane fade in active" id="home"> to <div class="tab-pane fade in active home"> and <a href="#home" data-toggle="tab"> to <a href=".home" data-toggle="tab"> ... worked for me.