Optimisation de mon code

Bonsoir,
Avec une nav-tabs de bootstrap. J'ai essaye que quand je click sur une table sa m'affiche l'autre le probléme c'est qu'a un moment sa m'affiche 2 tabs au lieu de une. Comment je pourais ameliore mon code.

PS : Je débute dans la JavaScript

Code Js :

$commandecour.click(function () {
        $('#1').removeClass();
        $('#2').addClass('active');
        $('#c1').hide();
        $('#c2').show();
    });

    $commande.click(function () {
        $('#2').removeClass();
        $('#1').addClass('active');
        $('#c2').hide();
        $('#c1').show();
    });

    $commandetermine.click(function () {
        $('#1').removeClass();
        $('#3').addClass('active');
        $('#c1').hide();
        $('#c3').show();
    });

Code Html

<div class="container">
    <ul class="nav nav-tabs nav-cod">
        <li id="1" role="presentation" class="active"><a id="commande" href="#">Commande (4)</a></li>
        <li id="2" role="presentation"><a id="commandecour" href="#">Commande En Cour (5)</a></li>
        <li id="2" role="presentation"><a id="commandeterminé"href="#">Commande Terminé (0) </a></li>
    </ul>
    <div id="c1" class="commande">
        commende total
    </div>
    <div id="c2" class="commandes">
        commande en cour
    </div>
    <div id="c3" class="commandess">
        commande recus
    </div>
</div>

Code css

.commande {
    min-height: 200px;
    width: 700px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: 110px ;
    margin-right:auto;
}

#c1 {display: block;}
#c2 {display: none;}
#c3 {display: none;}

.commandes {
    min-height: 200px;
    width: 700px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: 110px ;
    margin-right:auto;
}

.commandess {
    min-height: 200px;
    width: 700px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: 110px ;
    margin-right:auto;
}