javascript - PHP と JQuery でコンボ ボックスを独立させる

Question

ユーザーが別のコンボボックスで選択したものに応じて、コンボ ボックスにデータベース コンテンツを入力するのに問題があります。ボックスの 1 つの「ペア」を使用すると、正常に動作します。国 -> プレイヤー. しかし、同じページにいくつかのCOUNTRY->PLAYERを追加すると、すべてのプレーヤーが最初のCOUNTRY BOXによって選択されます。これは私のコードのスナップです。このWebページの例から作成されています:

<script type="text/javascript">
    $(document).ready(function(){
        $(".country").change(function(){
            var id=$(this).val();
            var dataString = 'id='+ id;    
            $.ajax({
                type: "POST",
                url: "ajax-search.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $(".player").html(html);
                    console.log(id);
                } 
            });        
        });
    });
</script>

---

   while ($row = mysql_fetch_array($result)) {
      $counter++;
         echo '<select class = "country" name="singleBetTeam[' . $counter . ']">';
         echo "<option selected = 'selected'> COUNRTY</option>";
            while ($row = mysql_fetch_array($result2)) {
               $data = $row['team_name'];
               echo '<option value="'.$data.'">'.$data.'</option>';
             }
             echo '</select><select name="singleBetStar[' . $counter . ']" class="player">';
          echo '<option selected="selected"> PLAYER </option></select>';
     }

問題は、最初のコンボボックスでドイツを選択すると、ドイツのプレイヤーにプレイヤー用の他のすべてのコンボ ボックスが表示されることです。これは、javascript で class="player" をチェックしているという事実に依存していますが、この接続を作成する方法がわかりません。