Clicking a second link does not update a div

Clicking a second link does not update a div

Hi all,
I need your help for my project. I have three links and one div in a PHP file. I want this div which is empty on load of the page to be updated by new content each time i click a link above it. The problem I have is that clicking the first link works perfectly (I take content from a file and loads it into the div), but clicking the second link does not work. When I click the second link, I want the div to be repopulated (by replacing previous content) by an html form with fields to be used to get user content.

Below is the full code i am using for the page. For someone who wants to help me (especially code for the second link), there will be need to update the jquery path, even for the bootstrap code

HERE IS THE CODE FOR THE PAGE:


<?php
 
?>
<!DOCTYPE html>
<html>
<head>
    <meta name="" charset="utf-8"/>
    <title>Gestion des autorisations pour modification des quittances RCMS</title>
    <link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
   
</head>   
<body>
    <div class="well"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="heading">
                    <h3 class="small text-info h3"><i class="glyphicon glyphicon-th"></i> Outils de gestion des autorisations pour modifier les quittances RCMS <i class="glyphicon glyphicon-th"></i></h3>
                </div>
                <div class="list-group">
                    <a  class="list-group-item active" id="one"><span class="glyphicon glyphicon-adjust"></span>&nbsp;    Voir le temps de modification paramétré par défaut </a>
                    <a  class="list-group-item" id="two"><span class="glyphicon glyphicon-wrench"></span>&nbsp;    Changer le temps de modification paramétré par défaut</a>
                    <a  class="list-group-item" id="three"><span class="glyphicon glyphicon-transfer"></span>&nbsp;  Réassigner le temps autorisé après expiration du temps par défaut</a>
                </div>
                <div class="col-md-4" id="content">
                    <span>Content</span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="bootstrap3/js/jQuery.min.js"></script>
    <script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // Envoyer une requête ajax si le link est cliqué et mettre à jour
            // La div#content avec le contenu retourné par PHP
            $('#one').click(function(){
               
                var request =    $.ajax({
                    url: 'get_temps_de_modif_par_defaut.php',
                    dataType: 'html',
                   
                });
                       
                request.done( function(msg){
                    $('#content').html('Le temps paramétré par défaut est: '+msg+' minutes');
                    $('#content').css({'background-color':'#EEE', 'padding':'7px'});
                });   
            });
           
           
           
           
        });
    </script>
   
    <script type="text/javascript">
        $(document).ready(function(){
            $('#two').click(function() {
                var content = '
                    <form class="form-horizontal" method="POST">
                        <div class="form-group">
                            <label for="temps" class="control-label col-sm-2">Nouveau delai (en minutes SVP!)</label>
                            <div class="input-group col-sm-6">
                                <span class="input-group-addon">
                                    <span class="glyphicon  glyphicon-clock"></span>
                                </span>
                                <input type="text" class="form-control" id="temps" name="temps"
                                placeholder="Marquer le nouveau temps ici..." />
                            </div>
                        </div>   
                    </form>
                ';
                $('#content').html(content);
            });
        });
       
    </script>   
</body>
</html>



Thanks for your help, please take me out of the trouble.