title: jquery on change and multiple selects
body: <p>got a problem with having mutliple select dropdowns on a page, each of which has an associated change event. Each one works individually but if I have them both running, neither works. There are two functions, UpdateLanguages and UpdateNoChangeMotorSelection. I have two dynamically built dropdowns the user can select and when they choose from one of them, they update other areas of the page.</p>
  
  <p>If I comment out either<br></p>
  
  <pre><code>$("#nochangemotorselection").html(nochangemotoroutput);
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$('#language').html(languageoutput);
  </code></pre>
  
  <p>The remaining one works perfectly. But if I have both of them running, then although both select dropdowns populate, nothing happens when they are changed.</p>
  
  <pre><code>function UpdateLanguages()
      {
          $.getJSON('php/languages.json', function(data)
              {//get the languages json file
              $.each(data.languages, function(key, val)
                     { //for each line of data in the languages.json file, get the key/value pair
              if(val.language == currentlanguage)
                          {
                              $('#texttransmission').text(val.texttransmission); 
                              $('#textcontroller').text(val.textcontroller);
                              $('#textmotor').text(val.textmotor);
                              $('#currentlanguage').text(currentlanguage); //displays in variable table
                          }
                      }); 
              });
      }
  
  function UpdateNoChangeMotorSelection()
      {
          $.getJSON('php/products.json', function(data)
              {
              $.each(data.products, function(key, val)
                     { 
              if(val.commercialname == nochangemotorid)
                          {
                              $('#nochangemotorspeed').text(val.speed); 
                              nochangemotorspeed = val.speed;
                              $('#nochangemotorefficiency').text(val.efficiencyclass);
                              nochangemotorefficiency = val.efficiencyclass;
                              $('#nochangemotorpower').text(val.power);
                              nochangemotorpower = val.power;
                              $('#nochangemotorpoles').text(val.poles);
                              nochangemotorpoles = val.pole;
                              $('#nochangemotorchosen').text(nochangemotorid);//displays in variable table
                          }
                      }); 
              });
      }
  // select language JSON     
  $.getJSON('php/languages.json', function(data){//get the languages json file
      var languageoutput = '&lt;select id="language" name="language" class="language"&gt;'; //start a variable called output full of html
      $.each(data.languages, function(key, val){ //for each line of data in the languages.json file, get the key/value pair
      languageoutput += '&lt;option&gt;' +val.language+ '&lt;/option&gt;';    //add to the variable 'output' with the value from the languages field
      });//end of each
      languageoutput += '&lt;/select&gt;';//add to the variable 'output'
      $('#language').html(languageoutput);//output result to the div with the id="languages"
      $( "#language" ).on('change', function() {
            var selectedlanguage = "";
           $( "select option:selected" ).each(function() {
              selectedlanguage += $( this ).text();
              });
          currentlanguage = selectedlanguage;
          DoUpdate();
      });
  }); 
  
  
  
  // select product JSON 
  $.getJSON('php/products.json', function(data){
      var nochangemotoroutput = '&lt;select id="nochangemotorselection" name="nochangemotorselection" class="nochangemotorselection"&gt;'; 
      $.each(data.products, function(key, val){ 
      if (val.productrange != 'Transmission')
          {
          if (val.productrange != 'Controller')
              {
              nochangemotoroutput += '&lt;option&gt;' +val.commercialname+ '&lt;/option&gt;'; 
              }   
          }
      });
      nochangemotoroutput += '&lt;/select&gt; ';
      $("#nochangemotorselection").html(nochangemotoroutput);
      $( "#nochangemotorselection" ).on('change', function() {
            var selectednochangemotor = "";
           $( "select option:selected" ).each(function() {
              selectednochangemotor += $( this ).text();
              });
          nochangemotorid = selectednochangemotor;
          UpdateNoChangeMotorSelection(); 
      });
  });
  </code></pre>