How to create interactive form with bootstrap - html

Question

My fiddle is here: http://jsfiddle.net/L4hkrwa6/14/
The HTML code is here:
<ul class="nav nav-pills nav-justified">
<li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>
<div class="tab-content">
<form action="test">
<div id="Show1" class="tab-pane fade in active">
<input type="text" name="OnlyMe"/>
</div>
</form>
<form action="differentTest">
<div id="Show2" class="tab-pane fade">
<input type="text" name="MeAnd23Submit"/>
</div>
<div id="Show3" class="tab-pane fade">
<input type="text" name="MeAnd23Submit2"/>
</div>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
When I click on Show1 (and when the page is loaded initially) I want to only see the Input 'OnlyMe'.
When I click on Show2 I want to only see the Inputs 'MeAnd23Submit', '23' and the submit button.
When I click on Show3 I want to only see the Inputs 'MeAnd23Submit2', '23' and the submit button.
I tried several combinations but nothing seems to work, I would appreciate any help...
Thanks in advance!
Update:
This is just a small example with the necessary items to understand the problem. In the "real case" I have many more input fields and I would like to not copy the fields in multiple tab-panes.

Answer 1

Have you tried this: forked fiddle
<ul class="nav nav-pills nav-justified">
<li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>
<div class="tab-content">
<div id="Show1" class="tab-pane fade in active">
<form action="test">
<input type="text" name="OnlyMe"/>
</form>
</div>
<div id="Show2" class="tab-pane fade">
<form action="differentTest">
<input type="text" name="MeAnd23Submit"/>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
<div id="Show3" class="tab-pane fade">
<form action="differentTest">
<input type="text" name="MeAnd23Submit2"/>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
</div>