i have an issue with my website. I am using bootstrap tabs to navigate through my site. All tabs are working except the last one. He is mixing the content of the last one with the one before. I am not a coder so i think my code looks horrible. I copied and pasted from different sites. So if you have improvements please let me know.
The .... in the red circle should be underneath the planning tab
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Duiklog</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Welkom bij mijn duiklog</h1>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#Duiklog" aria-controls="Duiklog" role="tab" data-toggle="tab">Duiklog</a></li>
<li role="presentation"><a href="#invoer" aria-controls="invoer" role="tab" data-toggle="tab">Invoer</a></li>
<li role="presentation"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">Planning</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Stats</h2><br>
Aantal duiken: 2<br>
Gemiddeld lucht verbruikt: 22.5000
</div>
<div role="tabpanel" class="tab-pane" id="Duiklog">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Datum</th>
<th>Locatie</th>
<th>Buddy</th>
<th>Diepte</th>
<th>Duiktijd</th>
<th>Watertype</th>
<th>Zicht</th>
<th>Temp</th>
<th>Duiktype</th>
<th>Fles</th>
<th>Druk start</th>
<th>Druk einde</th>
<th>Druk verbruikt</th>
<th>Lucht verbruikt</th>
<th>Opmerkingen</th>
</tr>
</thead>
<tbody>
<tr><td>2</td><td>2012-05-20</td><td>boschmolenplas</td><td>Harrie Wassen</td><td>11 m </td><td>39 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>200 bar </td><td>10 bar </td><td>190 bar </td><td>23ltr/min </td><td></td></tr><tr><td>1</td><td>2012-05-13</td><td>Panheel</td><td>Harrie Wassen</td><td>9 m </td><td>40 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>210 bar </td><td>40 bar </td><td>170 bar </td><td>22ltr/min </td><td>eerste duik</td></tr></table>
</div>
<div role="tabpanel" class="tab-pane" id="invoer">
<form action="send_post.php" method="post">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="datum">Datum:</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="idatum" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="locatie">Locatie:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ilocatie" placeholder="Voer locatie in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="buddy">Buddy:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ibuddy" placeholder="Voer buddy in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="diepte">Diepte:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idiepte" placeholder="Voer maximale diepte in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duiktijd">Duiktijd:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="iduiktijd" placeholder="Voer duiktijd in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukstart">Drukstart:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idrukstart" placeholder="Voer begindruk in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukeinde">Drukeinde:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idrukeinde" placeholder="Voer eindedruk in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="watertype">Watertype:</label>
<div class="col-sm-10">
<select class="form-control" name="iwatertype">
<option>Zoet</option>
<option>Zout</option>
<option>Brak</option>
</select>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zicht">Zicht:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="izicht" placeholder="Voer zicht in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="temperatuur">Temperatuur:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="itemperatuur" placeholder="Voer temperatuur in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duiktype">Duiktype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="iduiktype" placeholder="Voer Duiktype in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="flesvolume">Flesvolume:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="iflesvolume" placeholder="Voer flesvolume in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="opmerkingen">Opmerkingen:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="iopmerkingen" placeholder="Opmerkingen">
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="planning">
.....
</div>
<div class="container" style="padding-bottom: 75px;">
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Connectie met duiklog</div>
