JavaScript / jQuery - taking input from 2 drop down identical menus
<p>I have 2 drop down lists, which both hold the same list of <code>teams</code>, one to be used as the <code>home</code> team and one as the <code>away</code> team. At the moment the first drop down list works, when a <code>team</code> is selected from the list, it's <code>id</code> and <code>name</code> is output to the page. But when the other drop down is clicked, nothing happens. So for example the output takes the id and team name and outputs them to the textboxes.</p>

<p>Here is an example of each drop down list and the relevant code below, can anyone help me out?</p>

<p>HTML generated for home team list:</p>

<pre><code>&lt;select id="teamList" style="width: 160px;"&gt;
&lt;option&gt;&lt;/option&gt;
&lt;option id="1362174068837" value="1362174068837" class="teamDropDown"&gt;Liverpool&lt;/option&gt;&lt;/select&gt;
</code></pre>

<p>HTML generated for away team list:</p>

<pre><code>&lt;select id="teamList" style="width: 160px;"&gt;
&lt;option&gt;&lt;/option&gt;
&lt;option id="1362174068837" value="1362174068837" class="teamDropDown"&gt;Liverpool&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>JADE template used to generate the HTML (used for both lists):</p>

<pre><code>div#teamDropDownDiv
    -if(teamsList.length &gt; 0){
        select#teamList(style='width: 160px;')
            option
                -each team in teamsList
                    option.teamDropDown(id="#{team.key}",value="#{team.key}") #{team.name}
</code></pre>

<p>JavaScript for the page:</p>

<pre><code> Team.initTeamsDD = function(){
  $("#teamList").change(function(e){
    e.preventDefault();
    var teamId = $(this).val();

    $.get('/show/team/'+teamId, function(response){
      if(response.retStatus === 'success'){
        var teamData = response.teamData;
        $('#teamId').val(teamData.key);
        $('#teamName').val(teamData.name);
      } else if(response.retStatus === 'failure'){

      }
    });  
  });
</code></pre>
