Изменение значения одиночного раскрывающегося списка

Question

У меня возникла проблема, и я не уверен, как обойти ее. У меня есть 5 кнопок выпадающего списка, и когда я выбираю один вариант из первого раскрывающегося списка, он меняет его на эту опцию для всех 5 выпадающих меню.

Любая помощь с благодарностью: D (p.s. Я только скопировал 1 блок кода с 1 кнопки. Также обратите внимание, что все 5 выпадающих списков в одном и том же модальном).

Функция я пытаюсь использовать, чтобы обновить его является

$(".dropdown-menu li a").click(function() { 
 
    $("#Communityone").text($(this).text()); 
 
    $("#Communityone").val($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="Communityone" data-toggle="dropdown">Choice 1 <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="c11"> 
 
    <div class="col-md-2"> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">SpeedRunner</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Giveaway</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Community</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Interactive</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chill</a> 
 
     </li> 
 
     <p></p> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Beta</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">exampl</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">example</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">example</a> 
 
     </li> 
 
     <p></p> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">example</a> 
 
     </li> 
 
     <p></p> 
 
    </div>

Answer 1

Demo

$("div.dropdown ul li").on("click",function() 
{ 
    $(this).parents(".dropdown").find("button").html($(this).text()+" <span class='caret'></span>"); 
});