[Bootstrap] Menu déroulant

Bonjour,
J'ai crée dynamiquement plusieurs menu déroulants[ dans ma jsp avec bootstrap, je voudrais quand je sélectionne
une valeur dans l'un des menu que la valeur apparaissent dans le menu concerné.le soucis que j'ai la valeur
apparaisse dans tous les menus.quelqun pourrait m'aider s'il vous plait

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<body>
  <%@include file="header.jsp"%>
    <div class="container">
        <form action="meta.do" method="post">
            <c:set var="count" value="0" scope="page" />
            <c:forEach items="${map}" var="entry">
                <c:if test="${entry.value ne '[null]'}">
                    <c:set var="count" value="${count + 1}" scope="page" />
                    <div class="col-md-2">
                        <div class="dropdown">
                            <a aria-expanded="false" aria-haspopup="true" role="button"
                                data-toggle="dropdown" class="dropdown-toggle" href="#">
 
                                 <span id="selected">${entry.key}</span>
 
                                 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <c:forEach items="${entry.value}" var="valeur">
                                    <li><a href="#">${valeur}</a></li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </c:if>
            </c:forEach>
            <c:set var="para" value="${count}" scope="session" />
            <p>
                <button type="submit" class="btn btn-primary">Ajouter</button>
            </p>
        </form>
    </div>
    <script>
 
        $('.dropdown-menu a').click(function() {
 
        	for(var i=1;i<$('ul').length;i++)
 
 
 
        	   $('#selected').text($(this).text());  
        });
 
    </script>
</body>

Pièce jointe 295382