javascript - 単一のドロップダウンの値を変更する

Question

問題が発生しましたが、それを回避する方法がわかりません。5 つのドロップダウン ボタンがあり、最初のドロップダウンから 1 つのオプションを選択すると、5 つのドロップダウンすべてでそのオプションに変更されます。

どんな助けでも大歓迎です：D（ps私は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>